<!DOCTYPE html>
<html lang="zxx">


<!-- Mirrored from wphtml.com/html/tf/duralux-demo/apps-calendar.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 12 Nov 2024 11:22:13 GMT -->

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keyword" content="">
    <meta name="author" content="WRAPCODERS">
    <!--! The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags !-->
    <!--! BEGIN: Apps Title-->
    <title>Create Activity</title>
    <!--! END:  Apps Title-->
    <!--! BEGIN: Favicon-->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
    <!--! END: Favicon-->
    <!--! BEGIN: Bootstrap CSS-->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <!--! END: Bootstrap CSS-->
    <!--! BEGIN: Vendors CSS-->
    <link rel="stylesheet" type="text/css" href="assets/vendors/css/vendors.min.css">
    <link type="text/css" rel="stylesheet" href="assets/vendors/css/tui-calendar.min.css">
    <link type="text/css" rel="stylesheet" href="assets/vendors/css/tui-theme.min.css">
    <link type="text/css" rel="stylesheet" href="assets/vendors/css/tui-time-picker.min.css">
    <link type="text/css" rel="stylesheet" href="assets/vendors/css/tui-date-picker.min.css">
    <!--! END: Vendors CSS-->
    <!--! BEGIN: Custom CSS-->
    <link rel="stylesheet" type="text/css" href="assets/css/theme.min.css">
    <style>
        .activity-workspace {
            min-width: 0;
            gap: 20px;
            padding: 20px;
            background: #f6f8fb;
            align-items: flex-start;
            height: auto !important;
            min-height: calc(100vh - 80px);
        }

        .activity-form-panel,
        .activity-calendar-panel {
            flex: 1 1 50%;
            min-width: 0;
            border: 1px solid #e3e8f0;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 12px 34px rgba(15, 23, 42, .06);
            overflow: hidden;
        }

        .activity-form-panel { flex-basis: 54%; }
        .activity-calendar-panel { flex-basis: 46%; }
        .activity-form-panel.content-sidebar-xl { width: 54% !important; max-width: none !important; height: auto !important; }
        .activity-calendar-panel.content-area { width: 46% !important; max-width: none !important; height: auto !important; }
        .activity-form-panel .content-sidebar-header { min-height: 78px; padding: 16px 20px; border-bottom: 1px solid #e8ecf2; background: linear-gradient(135deg, #fff, #f6f8ff) !important; }
        .activity-create-icon { display: inline-flex; width: 42px; height: 42px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 12px; background: #3454d1; color: #fff; font-size: 18px; box-shadow: 0 8px 17px rgba(52,84,209,.2); }
        .activity-form-panel .content-sidebar-body { height: auto !important; max-height: none !important; overflow: visible !important; background: #fbfcfe; }
        #createActivityForm { max-width: 980px; margin: 0 auto; padding: 22px !important; }
        #createActivityForm > .row { margin: 0; padding: 20px; border: 1px solid #e5eaf1; border-radius: 14px; background: #fff; box-shadow: 0 7px 22px rgba(15,23,42,.035); }
        .activity-form-intro { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px 15px; border: 1px solid #e3e8f3; border-radius: 12px; background: #f7f9ff; }
        .activity-form-intro i { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; background: #eef2ff; color: #3454d1; }
        #createActivityForm .form-label, #createActivityForm legend { color: #4d596b; font-size: 11px !important; font-weight: 750; letter-spacing: .025em; }
        #createActivityForm .form-control, #createActivityForm .form-select { min-height: 43px; border-color: #dce2eb; border-radius: 9px; box-shadow: none; }
        #createActivityForm textarea.form-control { min-height: 88px; }
        #createActivityForm .input-group-text { width: 43px; justify-content: center; border-color: #dce2eb; border-radius: 9px 0 0 9px; background: #f8f9fc; color: #667085; }
        #createActivityForm .input-group > .form-control, #createActivityForm .input-group > .form-select { border-top-left-radius: 0; border-bottom-left-radius: 0; }
        #createActivityForm .form-control:focus, #createActivityForm .form-select:focus { border-color: #3454d1; box-shadow: 0 0 0 3px rgba(52,84,209,.11); }
        #createActivityForm .select2-container { width: 100% !important; min-width: 0; }
        #createActivityForm .input-group > .select2-container { flex: 1 1 auto; width: calc(100% - 43px) !important; }
        #createActivityForm .select2-selection--single, #createActivityForm .select2-selection--multiple { min-height: 43px !important; border-color: #dce2eb !important; border-radius: 9px !important; }
        #createActivityForm .input-group .select2-selection--single, #createActivityForm .input-group .select2-selection--multiple { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
        #createActivityForm .select2-selection--single .select2-selection__rendered { line-height: 41px !important; }
        #createActivityForm .select2-selection--single .select2-selection__arrow { height: 41px !important; }
        .activity-type-selector { margin-bottom: 20px; padding: 15px; border: 1px solid #e4e9f1; border-radius: 12px; background: #fafbfe; }
        .activity-type-buttons { display: grid !important; grid-template-columns: repeat(4, minmax(70px, 1fr)); gap: 8px !important; }
        .activity-type-buttons .btn { display: inline-flex; height: 58px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; border: 1px solid #e2e7ef; border-radius: 9px; background: #fff; color: #738096; font-size: 10px; font-weight: 700; }
        .activity-type-buttons .btn i { font-size: 16px; }
        .activity-type-buttons .btn:hover, .activity-type-buttons .btn.active, .activity-type-buttons .btn:has(i.text-primary) { border-color: #3454d1; background: #eef2ff; color: #3454d1; box-shadow: 0 4px 11px rgba(52,84,209,.1); }
        #createMessageModal .modal-content { overflow: hidden; border: 0; border-radius: 17px; box-shadow: 0 25px 70px rgba(16,24,40,.2); }
        #createMessageModal .modal-header { padding: 20px 24px; border-bottom: 1px solid #e8ecf2; background: linear-gradient(135deg,#f5f7ff,#fff); }
        #createMessageModal .message-modal-icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 12px; background: #3454d1; color: #fff; font-size: 18px; box-shadow: 0 8px 18px rgba(52,84,209,.22); }
        #createMessageModal .modal-body { padding: 22px 24px; }
        #createMessageModal .message-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #edf0f4; }
        #createMessageModal .message-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
        #createMessageModal .message-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: #344054; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
        #createMessageModal .form-label { margin-bottom: 6px; color: #344054; font-size: 12px; font-weight: 700; }
        #createMessageModal .form-control, #createMessageModal .form-select { min-height: 43px; border-color: #dce2eb; border-radius: 9px; }
        #createMessageModal .select2-container { width: 100% !important; }
        #createMessageModal .select2-selection--multiple { min-height: 43px; border-color: #dce2eb; border-radius: 9px; }
        #createMessageModal .modal-footer { padding: 15px 24px; border-top: 1px solid #e8ecf2; background: #fbfcfe; }
        #createNoteModal .modal-content { overflow: hidden; border: 0; border-radius: 17px; box-shadow: 0 25px 70px rgba(16,24,40,.2); }
        #createNoteModal .modal-header { padding: 20px 24px; border-bottom: 1px solid #e8ecf2; background: linear-gradient(135deg,#f5f7ff,#fff); }
        #createNoteModal .note-modal-icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 12px; background: #3454d1; color: #fff; font-size: 18px; box-shadow: 0 8px 18px rgba(52,84,209,.22); }
        #createNoteModal .modal-body { padding: 22px 24px; }
        #createNoteModal .note-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #edf0f4; }
        #createNoteModal .note-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
        #createNoteModal .note-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: #344054; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
        #createNoteModal .form-label { margin-bottom: 6px; color: #344054; font-size: 12px; font-weight: 700; }
        #createNoteModal .form-control, #createNoteModal .form-select { min-height: 43px; border-color: #dce2eb; border-radius: 9px; }
        #createNoteModal .modal-footer { padding: 15px 24px; border-top: 1px solid #e8ecf2; background: #fbfcfe; }
        #createFollowUpModal .modal-content { overflow: hidden; border: 0; border-radius: 17px; box-shadow: 0 25px 70px rgba(16,24,40,.2); }
        #createFollowUpModal .modal-header { padding: 20px 24px; border-bottom: 1px solid #e8ecf2; background: linear-gradient(135deg,#f5f7ff,#fff); }
        #createFollowUpModal .follow-up-icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 12px; background: #3454d1; color: #fff; font-size: 18px; box-shadow: 0 8px 18px rgba(52,84,209,.22); }
        #createFollowUpModal .modal-body { padding: 22px 24px; }
        #createFollowUpModal .follow-up-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #edf0f4; }
        #createFollowUpModal .follow-up-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
        #createFollowUpModal .follow-up-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: #344054; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
        #createFollowUpModal .form-label { margin-bottom: 6px; color: #344054; font-size: 12px; font-weight: 700; }
        #createFollowUpModal .form-control, #createFollowUpModal .form-select { min-height: 43px; border-color: #dce2eb; border-radius: 9px; }
        #createFollowUpModal .select2-container { width: 100% !important; }
        #createFollowUpModal .previous-activity-item { display: block; padding: 11px 13px; border: 1px solid #e4e9f1; border-radius: 9px; background: #fff; cursor: pointer; }
        #createFollowUpModal .previous-activity-item:hover { border-color: #9eacf0; background: #f8f9ff; }
        #createFollowUpModal .previous-activity-list { display: grid; max-height: 230px; gap: 8px; overflow-y: auto; }
        #createFollowUpModal .modal-footer { padding: 15px 24px; border-top: 1px solid #e8ecf2; background: #fbfcfe; }
        #createTodoModal .modal-content { overflow: hidden; border: 0; border-radius: 17px; box-shadow: 0 25px 70px rgba(16,24,40,.2); }
        #createTodoModal .modal-header { padding: 20px 24px; border-bottom: 1px solid #e8ecf2; background: linear-gradient(135deg,#f5f7ff,#fff); }
        #createTodoModal .todo-icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 12px; background: #3454d1; color: #fff; font-size: 18px; box-shadow: 0 8px 18px rgba(52,84,209,.22); }
        #createTodoModal .modal-body { padding: 22px 24px; }
        #createTodoModal .todo-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #edf0f4; }
        #createTodoModal .todo-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
        #createTodoModal .todo-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: #344054; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
        #createTodoModal .form-label { margin-bottom: 6px; color: #344054; font-size: 12px; font-weight: 700; }
        #createTodoModal .form-control, #createTodoModal .form-select { min-height: 43px; border-color: #dce2eb; border-radius: 9px; }
        #createTodoModal .select2-container { width: 100% !important; }
        #createTodoModal .modal-footer { padding: 15px 24px; border-top: 1px solid #e8ecf2; background: #fbfcfe; }
        .activity-date-time-card { padding: 15px; border: 1px solid #e5eaf1; border-radius: 12px; background: #fafbfc; }
        .activity-related-grid { margin-bottom: 18px; padding: 15px 3px 0; border-top: 1px solid #edf0f4; }
        .activity-advanced-section { margin-top: 4px !important; padding-top: 20px !important; border-top: 1px solid #edf0f4 !important; }
        .activity-form-actions { position: sticky; bottom: 0; z-index: 8; justify-content: flex-end; margin: 18px -20px -20px !important; padding: 14px 20px; border-top: 1px solid #e4e9f0; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
        .activity-calendar-panel .content-area-header { min-height: 64px; border-bottom: 1px solid #e8ecf2; background: #fff; }
        .activity-calendar-panel .content-area-body { min-height: 620px; background: #fff; }
        #tui-calendar-init { width: 100%; height: 620px; min-height: 620px; }
        .activity-calendar-panel .render-range { color: #263247; font-size: 13px; font-weight: 750; }
        .activity-calendar-panel .move-today { min-height: 36px; padding: 7px 12px; border: 1px solid #dfe5ee; border-radius: 8px; background: #fff; color: #526176; font-weight: 650; }
        .activity-calendar-panel .schedule-item { margin: 0 16px 10px; border: 1px solid #e7ebf2 !important; border-radius: 12px; background: #fff; }
        .activity-calendar-panel .img-group { display: none !important; }

        /* Keep this legacy activity workspace aligned with the shared professional CRM shell. */
        .crm-topbar { border-bottom: 1px solid #e7eaf0; background: rgba(255,255,255,.96); box-shadow: 0 4px 18px rgba(26,39,65,.045); backdrop-filter: blur(16px); }
        .crm-topbar .crm-topbar-inner { height: 80px; padding: 0 24px; }
        .crm-topbar .header-left, .crm-header-actions { gap: 10px; }
        .crm-header-icon { position: relative; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; margin: 0; border: 1px solid #e4e8ef; border-radius: 11px; color: #58677c; background: #fff; transition: .2s ease; }
        .crm-header-icon:hover { color: #3454d1; border-color: #ced6f5; background: #f6f8ff; transform: translateY(-1px); }
        #crm-fullscreen-toggle .maximize { display: inline-flex; }
        #crm-fullscreen-toggle .minimize { display: none; }
        body.full-screen-helper #crm-fullscreen-toggle .maximize { display: none; }
        body.full-screen-helper #crm-fullscreen-toggle .minimize { display: inline-flex; }
        .crm-workspace-context { min-width: 0; margin-left: 6px; padding-left: 16px; border-left: 1px solid #e7eaf0; line-height: 1.25; }
        .crm-workspace-eyebrow { display: block; max-width: 260px; overflow: hidden; color: #8a97a9; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
        .crm-workspace-title { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: #1f2d3d; font-size: 15px; font-weight: 750; }
        .crm-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #17c666; box-shadow: 0 0 0 4px rgba(23,198,102,.12); }
        .crm-quick-create { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; padding: 0 14px; border: 0; border-radius: 11px; color: #fff; font-size: 12px; font-weight: 700; background: linear-gradient(135deg,#3454d1,#5271e8); box-shadow: 0 7px 16px rgba(52,84,209,.2); }
        .crm-quick-create:hover, .crm-quick-create:focus { color: #fff; transform: translateY(-1px); }
        .crm-action-menu, .crm-notification-menu, .crm-user-menu { margin-top: 10px !important; padding: 8px; overflow: hidden; border: 1px solid #e4e8ef !important; border-radius: 14px !important; background: #fff; box-shadow: 0 18px 50px rgba(32,45,72,.14) !important; }
        .crm-action-menu { width: 270px; }
        .crm-dropdown-label { display: block; padding: 8px 10px 6px; color: #95a0b1; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
        .crm-action-menu .dropdown-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; }
        .crm-action-menu .dropdown-item:hover, .crm-user-menu .dropdown-item:hover { background: #f5f7fb; }
        .crm-action-menu .dropdown-item span:last-child { display: flex; min-width: 0; flex-direction: column; }
        .crm-action-menu .dropdown-item strong { color: #27364a; font-size: 12px; }
        .crm-action-menu .dropdown-item small { color: #8b97a8; font-size: 10px; font-weight: 500; }
        .crm-menu-icon { display: inline-flex; width: 34px; min-width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 9px; }
        .crm-notification-count { position: absolute; top: -5px; right: -5px; display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff; border-radius: 9px; color: #fff; font-size: 8px; font-weight: 800; background: #ea4d4d; }
        .crm-notification-menu { width: min(380px,calc(100vw - 24px)) !important; padding: 0; }
        .crm-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; border-bottom: 1px solid #edf0f4; }
        .crm-notification-list { max-height: 360px; overflow-y: auto; }
        .crm-notification-item { position: relative; display: flex; gap: 12px; padding: 13px 18px; border-bottom: 1px solid #f0f2f5; color: inherit; }
        .crm-notification-item.is-unread { background: #f7f9ff; }
        .crm-notification-item strong, .crm-notification-item small, .crm-notification-item time { display: block; padding-right: 8px; }
        .crm-notification-item strong { margin-bottom: 2px; color: #27364a; font-size: 12px; }
        .crm-notification-item small, .crm-notification-item time { color: #8b97a8; font-size: 10px; font-weight: 500; }
        .crm-notification-item time { margin-top: 5px; }
        .crm-empty-notifications { display: flex; min-height: 180px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: #8b97a8; }
        .crm-empty-notifications i { margin-bottom: 7px; color: #17c666; font-size: 28px; }
        .crm-dropdown-footer { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; color: #3454d1; font-size: 11px; border-top: 1px solid #edf0f4; background: #fafbfc; }
        .crm-user-trigger { display: flex; min-height: 44px; align-items: center; gap: 9px; margin-left: 2px; padding: 4px 7px 4px 4px; border: 1px solid #e4e8ef; border-radius: 13px; background: #fff; }
        .crm-user-avatar { display: inline-flex; width: 34px; min-width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; color: #fff; font-size: 11px; font-weight: 800; background: linear-gradient(135deg,#263b80,#526fdf); }
        .crm-user-copy { min-width: 0; max-width: 150px; flex-direction: column; line-height: 1.2; }
        .crm-user-copy strong, .crm-user-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .crm-user-copy strong { color: #27364a; font-size: 11px; }
        .crm-user-copy small { margin-top: 3px; color: #8b97a8; font-size: 9px; font-weight: 600; }
        .crm-user-menu { width: 290px; padding: 0; }
        .crm-user-menu-header { display: flex; align-items: center; gap: 12px; padding: 18px; background: linear-gradient(145deg,#f5f7ff,#fff); }
        .crm-user-avatar-lg { width: 44px; min-width: 44px; height: 44px; font-size: 13px; }
        .crm-user-menu-header p { color: #8491a3; font-size: 10px; }
        .crm-user-meta { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; color: #8390a2; font-size: 9px; font-weight: 650; background: #fafbfc; }
        .crm-user-meta .crm-live-dot { width: 6px; height: 6px; box-shadow: none; }
        .crm-user-menu .dropdown-item { display: flex; width: calc(100% - 16px); align-items: center; gap: 10px; margin: 1px 8px; padding: 9px 10px; border: 0; border-radius: 8px; font-size: 11px; background: transparent; }
        .crm-logout-button { color: #d94747 !important; }
        .crm-footer { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 24px; margin-top: 14px; padding: 14px 24px !important; border-top: 1px solid #e4e8ef !important; color: #8491a3; background: #fff; }
        .crm-footer-brand, .crm-footer-links, .crm-footer-center { display: flex; align-items: center; }
        .crm-footer-brand { gap: 10px; }
        .crm-footer-mark { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; color: #3454d1; background: #edf0ff; }
        .crm-footer-brand strong, .crm-footer-brand small { display: block; line-height: 1.25; }
        .crm-footer-brand strong { color: #2b394d; font-size: 11px; }
        .crm-footer-brand small, .crm-footer-center, .crm-footer-links { font-size: 9px; font-weight: 600; }
        .crm-footer-center, .crm-footer-links { gap: 18px; }
        .crm-footer-center span { display: inline-flex; align-items: center; gap: 6px; }
        .crm-footer-links a { color: #68778b; }

        @media (max-width: 767.98px) {
            .crm-topbar .crm-topbar-inner { padding: 0 14px; }
            .crm-workspace-context { margin-left: 2px; padding-left: 12px; }
            .crm-workspace-eyebrow { max-width: 130px; }
            .crm-header-actions { gap: 6px; }
            .crm-footer { align-items: flex-start; flex-direction: column; gap: 12px; padding: 16px !important; }
            .crm-footer-links { width: 100%; flex-wrap: wrap; gap: 10px 16px; }
            .crm-footer-links span { margin-left: auto; }
        }

        .activity-date-time-row {
            display: grid !important;
            grid-template-columns: minmax(130px, 1fr) minmax(110px, .8fr) auto minmax(130px, 1fr) minmax(110px, .8fr);
            align-items: center;
        }

        .activity-date-time-row .form-control {
            min-width: 0;
            width: 100%;
        }

        @media (max-width: 991.98px) {
            .activity-workspace {
                flex-direction: column;
                padding: 12px;
            }

            .activity-form-panel,
            .activity-calendar-panel {
                flex: 0 0 auto !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            .activity-date-time-row {
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            }

            .activity-date-time-row > span {
                display: none;
            }
        }

        @media (max-width: 575.98px) {
            .activity-date-time-row {
                grid-template-columns: 1fr;
            }

            #createActivityForm {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }

            .activity-type-buttons { grid-template-columns: repeat(4, 1fr); }
            .activity-calendar-panel .content-area-body, #tui-calendar-init { min-height: 520px; height: 520px; }
        }
    </style>
    <!--! END: Custom CSS-->
    <!--! HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries !-->
    <!--! WARNING: Respond.js doesn"t work if you view the page via file: !-->
    <!--[if lt IE 9]>
   <script src="https:oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="https:oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>
    <!--! ================================================================ !-->
    <!--! [Start] Navigation Manu !-->
    <!--! ================================================================ !-->
    @include('layouts.sidebar')

    <!--! ================================================================ !-->
    <!--! [End]  Navigation Manu !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! [Start] Header !-->
    <!--! ================================================================ !-->
    @include('layouts.header')

    <!--! ================================================================ !-->
    <!--! [End] Header !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! [Start] Main Content !-->
    <!--! ================================================================ !-->
    <main class="nxl-container apps-container apps-calendar">
        <div class="nxl-content without-header nxl-full-content">
            <!-- [ Main Content ] start -->
            <div class="main-content d-flex activity-workspace">
                <!-- [ Content Sidebar ] start -->
                <div class="content-sidebar-xl activity-form-panel"
                    data-scrollbar-target="#psScrollbarInit">
                    <div class="content-sidebar-header bg-white sticky-top hstack justify-content-between">
                        <div class="d-flex align-items-center gap-3">
                            <span class="activity-create-icon"><i class="feather-calendar"></i></span>
                            <div>
                                <h4 class="fw-bolder mb-1">Create Activity</h4>
                                <small class="text-muted">Plan a customer interaction or internal task</small>
                            </div>
                        </div>
                        <a href="{{ route('schedule-activity') }}" class="avatar-text avatar-md bg-light text-muted" title="Back to Activities" aria-label="Back to Activities">
                            <i class="feather-x"></i>
                        </a>
                    </div>
                    {{-- <div class="content-sidebar-header">
                        <a href="javascript:void(0);" class="btn btn-primary w-100" data-bs-toggle="modal"
                            data-bs-target="#newScheduleModal">
                            <i class="feather-calendar me-2"></i>
                            <span>New Activity</span>
                        </a>
                    </div> --}}


                    <div class="content-sidebar-body">
                        <div id="lnb-calendars" class="lnb-calendars">
                            <form id="createActivityForm" method="POST" action="{{ route('activities.store') }}" class="p-3" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="submission_token" value="{{ $submissionToken }}">
                                @if ($errors->any())
                                    <div class="alert alert-danger" role="alert">
                                        <strong>Please correct the following:</strong>
                                        <ul class="mb-0">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>

                                @endif
                                @php
                                    $workflowContext = [];
                                    if (request('leadId')) $workflowContext = ['related_type' => 'lead', 'related_id' => request('leadId')];
                                    elseif (request('id')) $workflowContext = ['related_type' => 'contact', 'related_id' => request('id')];
                                    elseif (request('dealId')) $workflowContext = ['related_type' => 'deal', 'related_id' => request('dealId')];
                                    elseif (request('ticketId')) $workflowContext = ['related_type' => 'ticket', 'related_id' => request('ticketId')];

                                    $contactById = $contacts->keyBy('id');
                                    $allowedOwnerIds = $users->pluck('id')->map(fn ($id) => (int) $id);
                                    $callRelatedRecords = collect();
                                    $addCallRecord = function ($type, $record, $label, $contact, $owner, $phone = null) use ($callRelatedRecords, $allowedOwnerIds) {
                                        $ownerId = $owner?->id && $allowedOwnerIds->contains((int) $owner->id) ? (int) $owner->id : (int) auth()->id();
                                        $callRelatedRecords->push([
                                            'type' => $type, 'id' => (int) $record->id, 'label' => $label,
                                            'contact_id' => $contact?->id ? (int) $contact->id : null,
                                            'contact_name' => $contact ? (trim($contact->first_name.' '.$contact->last_name) ?: 'Contact #'.$contact->id) : 'No linked contact',
                                            'owner_id' => $ownerId, 'owner_name' => $owner?->name ?: auth()->user()->name,
                                            'phone' => $phone ?: $contact?->contactPhones?->first()?->phone,
                                        ]);
                                    };
                                    foreach ($leads as $lead) {
                                        $contact = $contactById->get($lead->primary_contact_id);
                                        $addCallRecord('lead', $lead, trim($lead->first_name.' '.$lead->last_name) ?: ($lead->topic ?: 'Lead #'.$lead->id), $contact, $lead->assignedUser, $lead->contactPhones->first()?->phone);
                                    }
                                    foreach ($contacts as $contact) {
                                        $addCallRecord('contact', $contact, trim($contact->first_name.' '.$contact->last_name) ?: 'Contact #'.$contact->id, $contact, $contact->assignedUser, $contact->contactPhones->first()?->phone);
                                    }
                                    foreach ($accounts as $account) {
                                        $addCallRecord('account', $account, $account->account_name ?: 'Account #'.$account->id, $account->primaryContact, $account->assignedUser, $account->contactPhones->first()?->phone);
                                    }
                                    foreach ($deals as $deal) {
                                        $addCallRecord('deal', $deal, $deal->name ?: 'Deal #'.$deal->id, $deal->contact, $deal->assignedUser, $deal->contactPhones->first()?->phone);
                                    }
                                    foreach ($projects as $project) {
                                        $addCallRecord('project', $project, $project->name ?: 'Project #'.$project->id, $project->account?->primaryContact, $project->owner);
                                    }
                                    foreach ($cases as $case) {
                                        $contact = $case->contact ?: $case->deal?->contact ?: $case->account?->primaryContact ?: $contactById->get($case->lead?->primary_contact_id);
                                        $phone = $contact?->contactPhones?->first()?->phone ?: $case->lead?->contactPhones?->first()?->phone;
                                        $addCallRecord('case', $case, trim(($case->case_number ?: 'Case #'.$case->id).' — '.$case->subject), $contact, $case->assignee, $phone);
                                    }
                                    $initialRelatedType = '';
                                    $initialRelatedId = 0;
                                    foreach (['lead' => old('lead_id') ?: request('leadId'), 'contact' => old('contact_id') ?: request('id'), 'deal' => old('deal_id') ?: request('dealId'), 'account' => old('account_id') ?: request('accountId'), 'project' => old('project_id') ?: request('projectId'), 'case' => old('case_id') ?: request('caseId')] as $type => $id) {
                                        if ($id) { $initialRelatedType = $type; $initialRelatedId = (int) $id; break; }
                                    }
                                    $emailRecipientOptions = collect();
                                    foreach ($contacts as $contact) foreach ($contact->contactEmails as $email) $emailRecipientOptions->push(['email'=>$email->email,'label'=>(trim($contact->first_name.' '.$contact->last_name) ?: 'Contact #'.$contact->id).' — '.$email->email]);
                                    foreach ($leads as $lead) foreach ($lead->contactEmails as $email) $emailRecipientOptions->push(['email'=>$email->email,'label'=>(trim($lead->first_name.' '.$lead->last_name) ?: 'Lead #'.$lead->id).' — '.$email->email]);
                                    foreach ($accounts as $account) foreach ($account->contactEmails as $email) $emailRecipientOptions->push(['email'=>$email->email,'label'=>($account->account_name ?: 'Account #'.$account->id).' — '.$email->email]);
                                    foreach ($deals as $deal) foreach (($deal->contact?->contactEmails ?: collect()) as $email) $emailRecipientOptions->push(['email'=>$email->email,'label'=>($deal->name ?: 'Deal #'.$deal->id).' — '.$email->email]);
                                    $emailRecipientOptions = $emailRecipientOptions->filter(fn($item)=>filter_var($item['email'], FILTER_VALIDATE_EMAIL))->unique('email')->values();
                                @endphp
                                <div class="row mb-4 align-items-center" x-data="{
                                    selectedButton: 1,
                                    placeholderText: 'Call',
                                    relatedRecords: @js($callRelatedRecords->values()),
                                    relatedType: @js($initialRelatedType),
                                    relatedId: @js($initialRelatedId),
                                    callDateTime: @js(old('call_datetime', now()->format('Y-m-d\TH:i'))),
                                    callPhone: @js(old('phoneNumber', '')),
                                    meetingDateTime: @js(old('meeting_datetime', now()->format('Y-m-d\TH:i'))),
                                    meetingDuration: @js((int) old('duration', 30)),
                                    meetingLocation: @js(old('meeting_location_type', '')),
                                    taskStartDate: @js(old('start_date', now()->toDateString())),
                                    taskDueDate: @js(old('due_date', now()->addDay()->toDateString())),
                                    emailSubject: @js(old('subject', '')),
                                    emailStatus: @js(old('email_status', 'draft')),
                                    recordsForType() { return this.relatedRecords.filter(record => record.type === this.relatedType); },
                                    selectedRecord() { return this.relatedRecords.find(record => record.type === this.relatedType && Number(record.id) === Number(this.relatedId)); },
                                    syncCallRecord() { const record = this.selectedRecord(); this.callPhone = record?.phone || ''; },
                                    meetingDatePart(offsetMinutes = 0) { const date = new Date(this.meetingDateTime); date.setMinutes(date.getMinutes() + Number(offsetMinutes)); return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`; },
                                    meetingTimePart(offsetMinutes = 0) { const date = new Date(this.meetingDateTime); date.setMinutes(date.getMinutes() + Number(offsetMinutes)); return `${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}`; },
                                    activityTypes: {
                                        'call': 1,
                                        'appointment': 2,
                                        'task': 3,
                                        'email': 9
                                    },
                                    init() { this.$nextTick(() => this.syncCallRecord()); }
                                }">
                                    <input type="hidden" name="activity_type_id" :value="selectedButton" />
                                    <div class="col-12 px-0">
                                        <div class="activity-form-intro"><i class="feather-compass"></i><div><div class="fw-bold text-dark">Activity Details</div><small class="text-muted">Choose an activity type, schedule it, and connect the related CRM records.</small></div></div>
                                    </div>
                                    <!-- Call Input -->
                                    <div class="col-lg-12 mb-4 activity-type-selector">
                                        <label class="form-label d-block mb-2">Activity Type</label>
                                        <div class="input-group mb-3">
                                            <span class="input-group-text"><i class="feather-activity"></i></span>
                                            <input type="text" class="form-control" :value="placeholderText" readonly aria-label="Selected activity type" />
                                        </div>

                                        <!-- Icon Buttons Row -->
                                        <div class="d-flex gap-2 activity-type-buttons">
                                            <!-- Call Button -->
                                            <button type="button" class="btn btn-light" title="Call"
                                                @click="selectedButton = activityTypes['call']; placeholderText = 'Call'">
                                                <i class="feather-phone"
                                                    :class="selectedButton === activityTypes['call'] ? 'text-primary' : ''"></i>
                                                <span>Call</span>
                                            </button>

                                            <!-- Meeting Button -->
                                            <button type="button" class="btn btn-light" title="Meeting"
                                                @click="selectedButton = activityTypes['appointment']; placeholderText = 'Meeting'">
                                                <i class="feather-calendar"
                                                    :class="selectedButton === activityTypes['appointment'] ? 'text-primary' :
                                                        ''"></i>
                                                <span>Meeting</span>
                                            </button>

                                            <!-- Task Button -->
                                            <button type="button" class="btn btn-light" title="Task"
                                                @click="selectedButton = activityTypes['task']; placeholderText = 'Task'">
                                                <i class="feather-check-circle"
                                                    :class="selectedButton === activityTypes['task'] ? 'text-primary' : ''"></i>
                                                <span>Task</span>
                                            </button>

                                            <!-- Email Button -->
                                            <button type="button" class="btn btn-light" title="Email"
                                                @click="selectedButton = activityTypes['email']; placeholderText = 'Email'">
                                                <i class="feather-mail"
                                                    :class="selectedButton === activityTypes['email'] ? 'text-primary' : ''"></i>
                                                <span>Email</span>
                                            </button>

                                            <button type="button" class="btn btn-light" data-bs-toggle="modal"
                                                data-bs-target="#createMessageModal" title="Message">
                                                <i class="feather-message-square"></i><span>Message</span>
                                            </button>

                                            <button type="button" class="btn btn-light" data-bs-toggle="modal"
                                                data-bs-target="#createNoteModal" title="Note">
                                                <i class="feather-file-text"></i><span>Note</span>
                                            </button>

                                            <button type="button" class="btn btn-light" data-bs-toggle="modal"
                                                data-bs-target="#createFollowUpModal" title="Follow-up">
                                                <i class="feather-repeat"></i><span>Follow-up</span>
                                            </button>

                                            <button type="button" class="btn btn-light" data-bs-toggle="modal"
                                                data-bs-target="#createTodoModal" title="To-do">
                                                <i class="feather-check-square"></i><span>To-do</span>
                                            </button>
                                        </div>
                                    </div>

                                    <fieldset class="row g-3 border-0 p-0 m-0" x-show="selectedButton === 1"
                                        :disabled="selectedButton !== 1">
                                        <div class="col-12">
                                            <div class="d-flex align-items-center gap-2 mb-1">
                                                <i class="feather-phone-call text-primary"></i>
                                                <div><div class="fw-bold text-dark">Call Information</div><small class="text-muted">Record the call, responsible people, schedule, result, and notes.</small></div>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label" for="callSubjectInput">Call Subject <span class="text-danger">*</span></label>
                                            <input class="form-control" id="callSubjectInput" name="title" value="{{ old('title') }}" maxlength="255" required placeholder="Enter call subject">
                                        </div>

                                        <div class="col-md-5">
                                            <label class="form-label" for="callRelatedType">Related To <span class="text-danger">*</span></label>
                                            <select class="form-control" id="callRelatedType" x-model="relatedType" @change="relatedId = ''; syncCallRecord()" required>
                                                <option value="">Select module</option>
                                                <option value="lead">Lead</option><option value="contact">Contact</option>
                                                <option value="account">Account</option><option value="deal">Deal</option><option value="case">Case</option>
                                            </select>
                                        </div>
                                        <div class="col-md-7">
                                            <label class="form-label" for="callRelatedRecord">Related Record <span class="text-danger">*</span></label>
                                            <select class="form-control" id="callRelatedRecord" x-model.number="relatedId" @change="syncCallRecord()" :disabled="!relatedType" required>
                                                <option value="">Select record</option>
                                                <template x-for="record in recordsForType()" :key="`${record.type}-${record.id}`">
                                                    <option :value="record.id" x-text="record.label"></option>
                                                </template>
                                            </select>
                                            <input type="hidden" name="lead_id" :value="relatedId" :disabled="relatedType !== 'lead'">
                                            <input type="hidden" name="contact_id" :value="relatedId" :disabled="relatedType !== 'contact'">
                                            <input type="hidden" name="account_id" :value="relatedId" :disabled="relatedType !== 'account'">
                                            <input type="hidden" name="deal_id" :value="relatedId" :disabled="relatedType !== 'deal'">
                                            <input type="hidden" name="case_id" :value="relatedId" :disabled="relatedType !== 'case'">
                                            <input type="hidden" name="contact_id" :value="selectedRecord()?.contact_id || ''" :disabled="relatedType === 'contact' || !selectedRecord()?.contact_id">
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label">Contact Owner</label>
                                            <input class="form-control" :value="selectedRecord()?.owner_name || ''" readonly placeholder="Retrieved from related record">
                                            <input type="hidden" name="owner" :value="selectedRecord()?.owner_id || {{ (int) auth()->id() }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Contact Person</label>
                                            <input class="form-control" :value="selectedRecord()?.contact_name || ''" readonly placeholder="Retrieved from related record">
                                            <input type="hidden" name="callFrom" :value="selectedRecord()?.contact_name || ''">
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="callPhoneInput">Phone Number From <span class="text-danger">*</span></label>
                                            <input class="form-control" id="callPhoneInput" name="phoneNumber" x-model="callPhone" required placeholder="Phone number">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label" for="callDirectionInput">Call Type <span class="text-danger">*</span></label>
                                            <select class="form-control" id="callDirectionInput" name="direction" required>
                                                <option value="">Select call type</option>
                                                <option value="inbound" @selected(old('direction') === 'inbound')>Incoming</option>
                                                <option value="outbound" @selected(old('direction') === 'outbound')>Outgoing</option>
                                            </select>
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label" for="callAssigneesInput">Assigned To <span class="text-danger">*</span></label>
                                            <select class="form-control" id="callAssigneesInput" name="assignee_ids[]" multiple required data-placeholder="Select one or more users">
                                                @foreach($users as $user)
                                                    <option value="{{ $user->id }}" @selected(in_array($user->id, old('assignee_ids', [auth()->id()])))>{{ $user->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="callDateTimeInput">Call Date &amp; Time <span class="text-danger">*</span></label>
                                            <input class="form-control" id="callDateTimeInput" type="datetime-local" x-model="callDateTime" required>
                                            <input type="hidden" name="start_date" :value="callDateTime.slice(0, 10)">
                                            <input type="hidden" name="start_time" :value="callDateTime.slice(11, 16)">
                                            <input type="hidden" name="end_date" :value="callDateTime.slice(0, 10)">
                                            <input type="hidden" name="end_time" :value="callDateTime.slice(11, 16)">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label" for="callReminderInput">Reminder</label>
                                            <input class="form-control" id="callReminderInput" type="datetime-local" name="remind_at" value="{{ old('remind_at') }}">
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="callEscalationInput">Escalation After</label>
                                            <select class="form-control" id="callEscalationInput" name="reminder_escalation_hours">
                                                @foreach([4, 12, 24, 48, 72] as $hours)
                                                    <option value="{{ $hours }}" @selected((int) old('reminder_escalation_hours', 24) === $hours)>{{ $hours }} hours</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="callDurationInput">Duration <span class="text-danger">*</span></label>
                                            <input class="form-control" id="callDurationInput" name="duration" value="{{ old('duration') }}" required placeholder="e.g. 15 minutes">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label" for="callStatusInput">Status <span class="text-danger">*</span></label>
                                            <select class="form-control" id="callStatusInput" name="lifecycle_status" required>
                                                <option value="planned">Planned</option><option value="open">Open</option>
                                                <option value="in_progress">In Progress</option><option value="completed">Completed</option><option value="cancelled">Cancelled</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label" for="callOutcomeInput">Outcome <span class="text-danger">*</span></label>
                                            <select class="form-control" id="callOutcomeInput" name="outcome" required>
                                                <option value="">Select outcome</option><option value="interested">Interested</option>
                                                <option value="follow_up_required">Follow-up Required</option><option value="not_interested">Not Interested</option>
                                            </select>
                                        </div>

                                        <div class="col-12 mb-3">
                                            <label class="form-label" for="callNotesInput">Note</label>
                                            <textarea class="form-control" id="callNotesInput" name="description" rows="4" placeholder="Add call notes">{{ old('description') }}</textarea>
                                        </div>
                                        <div class="col-12 mb-3">
                                            <label class="form-label" for="callEvidenceInput">Evidence Attachment</label>
                                            <input class="form-control" id="callEvidenceInput" type="file" name="attachment"
                                                accept="image/*,audio/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.txt">
                                            <small class="text-muted">Attach supporting evidence up to 10 MB.</small>
                                        </div>
                                    </fieldset>

                                    <fieldset class="row g-3 border-0 p-0 m-0" x-show="selectedButton === 2"
                                        :disabled="selectedButton !== 2">
                                        <div class="col-12">
                                            <div class="d-flex align-items-center gap-2 mb-1"><i class="feather-calendar text-primary"></i><div><div class="fw-bold text-dark">Meeting Information</div><small class="text-muted">Schedule the meeting, invite employees, and connect the related CRM record.</small></div></div>
                                        </div>
                                        <div class="col-12"><label class="form-label" for="meetingSubjectInput">Meeting Subject <span class="text-danger">*</span></label><input class="form-control" id="meetingSubjectInput" name="title" value="{{ old('title') }}" maxlength="255" required placeholder="Enter meeting subject"></div>

                                        <div class="col-md-5"><label class="form-label" for="meetingRelatedType">Related To <span class="text-danger">*</span></label><select class="form-control" id="meetingRelatedType" x-model="relatedType" @change="relatedId = ''" required><option value="">Select module</option><option value="lead">Lead</option><option value="contact">Contact</option><option value="account">Account</option><option value="deal">Deal</option><option value="project">Project</option><option value="case">Case</option></select></div>
                                        <div class="col-md-7"><label class="form-label" for="meetingRelatedRecord">Related Record <span class="text-danger">*</span></label><select class="form-control" id="meetingRelatedRecord" x-model.number="relatedId" :disabled="!relatedType" required><option value="">Select record</option><template x-for="record in recordsForType()" :key="`meeting-${record.type}-${record.id}`"><option :value="record.id" x-text="record.label"></option></template></select>
                                            <input type="hidden" name="lead_id" :value="relatedId" :disabled="relatedType !== 'lead'"><input type="hidden" name="contact_id" :value="relatedId" :disabled="relatedType !== 'contact'"><input type="hidden" name="account_id" :value="relatedId" :disabled="relatedType !== 'account'"><input type="hidden" name="deal_id" :value="relatedId" :disabled="relatedType !== 'deal'"><input type="hidden" name="project_id" :value="relatedId" :disabled="relatedType !== 'project'"><input type="hidden" name="case_id" :value="relatedId" :disabled="relatedType !== 'case'"><input type="hidden" name="contact_id" :value="selectedRecord()?.contact_id || ''" :disabled="relatedType === 'contact' || !selectedRecord()?.contact_id">
                                        </div>

                                        <div class="col-md-6"><label class="form-label" for="meetingOwnerInput">Owner To <span class="text-danger">*</span></label><select class="form-control" id="meetingOwnerInput" name="owner" required>@foreach($users as $user)<option value="{{ $user->id }}" @selected((int) old('owner',auth()->id())===$user->id)>{{ $user->name }}</option>@endforeach</select></div>
                                        <div class="col-md-6"><label class="form-label" for="meetingAttendeesInput">Attendees <span class="text-danger">*</span></label><select class="form-control" id="meetingAttendeesInput" name="attendee_ids[]" multiple required data-placeholder="Select one or more employees">@foreach($users as $user)<option value="{{ $user->id }}" @selected(in_array($user->id,old('attendee_ids',[auth()->id()])))>{{ $user->name }}</option>@endforeach</select></div>

                                        <div class="col-md-6"><label class="form-label" for="meetingDateTimeInput">Date &amp; Time <span class="text-danger">*</span></label><input class="form-control" id="meetingDateTimeInput" type="datetime-local" x-model="meetingDateTime" required><input type="hidden" name="start_date" :value="meetingDatePart()"><input type="hidden" name="start_time" :value="meetingTimePart()"><input type="hidden" name="end_date" :value="meetingDatePart(meetingDuration)"><input type="hidden" name="end_time" :value="meetingTimePart(meetingDuration)"></div>
                                        <div class="col-md-6"><label class="form-label" for="meetingDurationInput">Duration <span class="text-danger">*</span></label><select class="form-control" id="meetingDurationInput" name="duration" x-model.number="meetingDuration" required><option value="15">15 minutes</option><option value="30">30 minutes</option><option value="45">45 minutes</option><option value="60">1 hour</option><option value="90">1.5 hours</option><option value="120">2 hours</option></select></div>

                                        <div class="col-md-6"><label class="form-label" for="meetingLocationInput">Location <span class="text-danger">*</span></label><select class="form-control" id="meetingLocationInput" name="meeting_location_type" x-model="meetingLocation" required><option value="">Select location</option><option value="office">Office</option><option value="online">Online</option><option value="customer_location">Customer Location</option></select><input type="hidden" name="location" :value="meetingLocation === 'customer_location' ? 'Customer Location' : (meetingLocation ? meetingLocation.charAt(0).toUpperCase() + meetingLocation.slice(1) : '')"></div>
                                        <div class="col-md-6"><label class="form-label" for="meetingTypeInput">Meeting Type <span class="text-danger">*</span></label><select class="form-control" id="meetingTypeInput" name="meeting_type" required><option value="">Select meeting type</option><option value="online">Online Platform</option><option value="physical">Physical</option><option value="phone">Phone</option></select></div>

                                        <div class="col-md-6"><label class="form-label" for="meetingStatusInput">Status <span class="text-danger">*</span></label><select class="form-control" id="meetingStatusInput" name="lifecycle_status" required><option value="planned">Planned</option><option value="completed">Completed</option><option value="cancelled">Cancelled</option></select></div>
                                        <div class="col-md-6"><label class="form-label" for="meetingReminderInput">Reminder Date</label><input class="form-control" id="meetingReminderInput" type="datetime-local" name="remind_at" value="{{ old('remind_at') }}"></div>
                                        <div class="col-12"><label class="form-label" for="meetingAgendaInput">Agenda</label><textarea class="form-control" id="meetingAgendaInput" name="agenda" rows="3" required placeholder="Add meeting agenda">{{ old('agenda') }}</textarea></div>
                                        <div class="col-12"><label class="form-label" for="meetingNoteInput">Note</label><textarea class="form-control" id="meetingNoteInput" name="description" rows="4" placeholder="Add meeting notes">{{ old('description') }}</textarea></div>
                                        <div class="col-12 mb-3"><label class="form-label" for="meetingEvidenceInput">Evidence Attachment</label><input class="form-control" id="meetingEvidenceInput" type="file" name="attachment" accept="image/*,audio/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.txt"><small class="text-muted">Attach supporting evidence up to 10 MB.</small></div>
                                    </fieldset>

                                    <fieldset class="row g-3 border-0 p-0 m-0" x-show="selectedButton === 3"
                                        :disabled="selectedButton !== 3">
                                        <div class="col-12"><div class="d-flex align-items-center gap-2 mb-1"><i class="feather-check-square text-primary"></i><div><div class="fw-bold text-dark">Task Information</div><small class="text-muted">Define the work, ownership, deadline, and related CRM record.</small></div></div></div>
                                        <div class="col-12"><label class="form-label" for="taskSubjectInput">Task Subject <span class="text-danger">*</span></label><input class="form-control" id="taskSubjectInput" name="title" value="{{ old('title') }}" maxlength="255" required placeholder="Enter task subject"></div>
                                        <div class="col-12"><label class="form-label" for="taskDescriptionInput">Description</label><textarea class="form-control" id="taskDescriptionInput" name="description" rows="3" placeholder="Describe the task">{{ old('description') }}</textarea></div>

                                        <div class="col-md-5"><label class="form-label" for="taskRelatedType">Related To <span class="text-danger">*</span></label><select class="form-control" id="taskRelatedType" x-model="relatedType" @change="relatedId = ''" required><option value="">Select module</option><option value="lead">Lead</option><option value="contact">Contact</option><option value="account">Account</option><option value="deal">Deal</option><option value="project">Project</option><option value="case">Case</option></select></div>
                                        <div class="col-md-7"><label class="form-label" for="taskRelatedRecord">Related Record <span class="text-danger">*</span></label><select class="form-control" id="taskRelatedRecord" x-model.number="relatedId" :disabled="!relatedType" required><option value="">Select record</option><template x-for="record in recordsForType()" :key="`task-${record.type}-${record.id}`"><option :value="record.id" x-text="record.label"></option></template></select>
                                            <input type="hidden" name="lead_id" :value="relatedId" :disabled="relatedType !== 'lead'"><input type="hidden" name="contact_id" :value="relatedId" :disabled="relatedType !== 'contact'"><input type="hidden" name="account_id" :value="relatedId" :disabled="relatedType !== 'account'"><input type="hidden" name="deal_id" :value="relatedId" :disabled="relatedType !== 'deal'"><input type="hidden" name="project_id" :value="relatedId" :disabled="relatedType !== 'project'"><input type="hidden" name="case_id" :value="relatedId" :disabled="relatedType !== 'case'"><input type="hidden" name="contact_id" :value="selectedRecord()?.contact_id || ''" :disabled="relatedType === 'contact' || !selectedRecord()?.contact_id">
                                        </div>

                                        <div class="col-md-6"><label class="form-label" for="taskOwnerInput">Owner <span class="text-danger">*</span></label><select class="form-control" id="taskOwnerInput" name="owner" required>@foreach($users as $user)<option value="{{ $user->id }}" @selected((int) old('owner',auth()->id())===$user->id)>{{ $user->name }}</option>@endforeach</select></div>
                                        <div class="col-md-6"><label class="form-label" for="taskAssigneesInput">Assigned To <span class="text-danger">*</span></label><select class="form-control" id="taskAssigneesInput" name="assignee_ids[]" multiple required data-placeholder="Select one or more users">@foreach($users as $user)<option value="{{ $user->id }}" @selected(in_array($user->id,old('assignee_ids',[auth()->id()])))>{{ $user->name }}</option>@endforeach</select></div>
                                        <div class="col-md-4"><label class="form-label" for="taskPriorityInput">Priority <span class="text-danger">*</span></label><select class="form-control" id="taskPriorityInput" name="priority" required><option value="">Select priority</option>@foreach($priorities as $priority)<option value="{{ $priority->id }}" @selected(old('priority')==$priority->id)>{{ $priority->name }}</option>@endforeach</select></div>
                                        <div class="col-md-4"><label class="form-label" for="taskStartDateInput">Start Date</label><input class="form-control" id="taskStartDateInput" type="date" x-model="taskStartDate"><input type="hidden" name="start_date" :value="taskStartDate"><input type="hidden" name="start_time" value="09:00"></div>
                                        <div class="col-md-4"><label class="form-label" for="taskDueDateInput">Due Date <span class="text-danger">*</span></label><input class="form-control" id="taskDueDateInput" type="date" name="due_date" x-model="taskDueDate" :min="taskStartDate" required><input type="hidden" name="end_date" :value="taskDueDate"><input type="hidden" name="end_time" value="17:00"></div>
                                        <div class="col-md-6"><label class="form-label" for="taskStatusInput">Status <span class="text-danger">*</span></label><select class="form-control" id="taskStatusInput" name="lifecycle_status" required><option value="open">Open</option><option value="in_progress">In Process</option><option value="completed">Completed</option><option value="cancelled">Cancelled</option></select></div>
                                        <div class="col-md-6 mb-3"><label class="form-label" for="taskCommentsInput">Comments</label><textarea class="form-control" id="taskCommentsInput" name="regarding" rows="3" placeholder="Add comments">{{ old('regarding') }}</textarea></div>
                                    </fieldset>

                                    <fieldset class="row g-3 border-0 p-0 m-0" x-show="selectedButton === 9"
                                        :disabled="selectedButton !== 9">
                                        <div class="col-12"><div class="d-flex align-items-center gap-2 mb-1"><i class="feather-mail text-primary"></i><div><div class="fw-bold text-dark">Email Information</div><small class="text-muted">Compose, schedule, and track an email against a CRM record.</small></div></div></div>
                                        <div class="col-12"><label class="form-label" for="customEmailSubject">Email Subject <span class="text-danger">*</span></label><input class="form-control" id="customEmailSubject" name="subject" x-model="emailSubject" maxlength="255" required placeholder="Enter email subject"><input type="hidden" name="title" :value="emailSubject"></div>
                                        <div class="col-md-6"><label class="form-label" for="customEmailFrom">From — Selected <span class="text-danger">*</span></label><x-activity-email-sender id="customEmailFrom" required /></div>
                                        <div class="col-md-6"><label class="form-label" for="customEmailTo">To <span class="text-danger">*</span></label><select class="form-control" id="customEmailTo" multiple required data-placeholder="Select or enter recipients">@foreach($emailRecipientOptions as $recipient)<option value="{{ $recipient['email'] }}">{{ $recipient['label'] }}</option>@endforeach</select><input type="hidden" name="email_to" id="customEmailToValue" value="{{ old('email_to') }}"></div>
                                        <div class="col-md-6"><label class="form-label" for="customEmailCc">CC</label><input class="form-control" id="customEmailCc" name="cc_recipients" value="{{ old('cc_recipients') }}" placeholder="Comma-separated emails"></div>
                                        <div class="col-md-6"><label class="form-label" for="customEmailBcc">BCC</label><input class="form-control" id="customEmailBcc" name="bcc_recipients" value="{{ old('bcc_recipients') }}" placeholder="Comma-separated emails"></div>

                                        <div class="col-md-5"><label class="form-label" for="emailRelatedType">Related To <span class="text-danger">*</span></label><select class="form-control" id="emailRelatedType" x-model="relatedType" @change="relatedId = ''" required><option value="">Select module</option><option value="lead">Lead</option><option value="contact">Contact</option><option value="account">Account</option><option value="deal">Deal</option><option value="project">Project</option><option value="case">Case</option></select></div>
                                        <div class="col-md-7"><label class="form-label" for="emailRelatedRecord">Related Record <span class="text-danger">*</span></label><select class="form-control" id="emailRelatedRecord" x-model.number="relatedId" :disabled="!relatedType" required><option value="">Select record</option><template x-for="record in recordsForType()" :key="`email-${record.type}-${record.id}`"><option :value="record.id" x-text="record.label"></option></template></select><input type="hidden" name="lead_id" :value="relatedId" :disabled="relatedType !== 'lead'"><input type="hidden" name="contact_id" :value="relatedId" :disabled="relatedType !== 'contact'"><input type="hidden" name="account_id" :value="relatedId" :disabled="relatedType !== 'account'"><input type="hidden" name="deal_id" :value="relatedId" :disabled="relatedType !== 'deal'"><input type="hidden" name="project_id" :value="relatedId" :disabled="relatedType !== 'project'"><input type="hidden" name="case_id" :value="relatedId" :disabled="relatedType !== 'case'"></div>

                                        <div class="col-md-6"><label class="form-label" for="customEmailOwner">Owner <span class="text-danger">*</span></label><select class="form-control" id="customEmailOwner" name="owner" required>@foreach($users as $user)<option value="{{ $user->id }}" @selected((int) old('owner',auth()->id())===$user->id)>{{ $user->name }}</option>@endforeach</select></div>
                                        <div class="col-md-6"><label class="form-label" for="customEmailTemplate">Email Template</label><select class="form-control" id="customEmailTemplate"><option value="">Select template</option>@foreach($emailTemplates as $template)<option value="{{ $template->id }}" data-subject="{{ $template->subject }}" data-body="{{ $template->body }}">{{ $template->name }}</option>@endforeach</select></div>
                                        <div class="col-md-4"><label class="form-label" for="customEmailStatus">Status <span class="text-danger">*</span></label><select class="form-control" id="customEmailStatus" name="email_status" x-model="emailStatus" required><option value="draft">Draft</option><option value="sent">Sent</option><option value="opened">Opened</option><option value="replied">Replied</option><option value="failed">Failed</option></select></div>
                                        <div class="col-md-4"><label class="form-label" for="customEmailSentAt">Sent Date &amp; Time</label><input class="form-control" id="customEmailSentAt" type="datetime-local" name="sent_at" value="{{ old('sent_at') }}"></div>
                                        <div class="col-md-4"><label class="form-label" for="customEmailScheduledAt">Scheduled to Send</label><input class="form-control" id="customEmailScheduledAt" type="datetime-local" name="scheduled_at" value="{{ old('scheduled_at') }}"></div>
                                        <input type="hidden" name="start_date" value="{{ now()->toDateString() }}"><input type="hidden" name="start_time" value="{{ now()->format('H:i') }}"><input type="hidden" name="end_date" value="{{ now()->toDateString() }}"><input type="hidden" name="end_time" value="{{ now()->addHour()->format('H:i') }}"><input type="hidden" name="lifecycle_status" value="planned">
                                        <div class="col-12"><label class="form-label" for="customEmailComments">Comments / Email Body <span class="text-danger">*</span></label><textarea class="form-control" id="customEmailComments" name="email_body" rows="5" required placeholder="Write the email message">{{ old('email_body') }}</textarea></div>
                                        <div class="col-12 mb-3"><label class="form-label" for="customEmailAttachment">Attachments</label><input class="form-control" id="customEmailAttachment" type="file" name="attachment" accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt"><small class="text-muted">Attach a file up to 10 MB.</small></div>
                                    </fieldset>

                                    <fieldset class="row g-0 border-0 p-0 m-0" x-show="![1,2,3,9].includes(selectedButton)"
                                        :disabled="[1,2,3,9].includes(selectedButton)">


                                    <!-- New Fields -->
                                    <div class="col-lg-12 mb-4 activity-date-time-card">
                                        <fieldset>
                                            <legend class="form-label fs-6">Schedule</legend>
                                        <div class="activity-date-time-row gap-2">
                                            <!-- Start Date -->
                                            <label class="visually-hidden" for="activityStartDate">Start date</label>
                                            <input type="date" class="form-control flex-grow-1" name="start_date"
                                                id="activityStartDate"
                                                value="{{ old('start_date', now()->toDateString()) }}" required />

                                            <!-- Start Time -->
                                            <label class="visually-hidden" for="activityStartTime">Start time</label>
                                            <input type="time" class="form-control flex-grow-1" name="start_time"
                                                id="activityStartTime"
                                                value="{{ old('start_time', now()->format('H:i')) }}" required />

                                            <span class="align-self-center">-</span>

                                            <!-- End Date -->
                                            <label class="visually-hidden" for="activityEndDate">End date</label>
                                            <input type="date" class="form-control flex-grow-1" name="end_date"
                                                id="activityEndDate"
                                                value="{{ old('end_date', now()->toDateString()) }}" required />

                                            <!-- End Time -->
                                            <label class="visually-hidden" for="activityEndTime">End time</label>
                                            <input type="time" class="form-control flex-grow-1" name="end_time"
                                                id="activityEndTime"
                                                value="{{ old('end_time', now()->addHour()->format('H:i')) }}" required />
                                        </div>
                                        </fieldset>
                                    </div>

                                    @php
                                        $selectedContactId = request('id');
                                        $selectedLeadId = request('leadId');
                                        $selectedDealId = request('dealId');
                                        $selectedTicketId = request('ticketId');
                                    @endphp

                                    <div class="col-lg-6 mb-4">
                                        <label class="form-label" for="contactInput">Contact</label>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-user"></i></div>
                                            <select class="form-control" name="contact_id" id="contactInput"
                                                {{ $selectedContactId ? 'disabled' : '' }}> {{-- Disable if `id` is passed --}}
                                                <option value="" disabled
                                                    {{ !$selectedContactId ? 'selected' : '' }}>Select Contact</option>
                                                @foreach ($contacts as $contact)
                                                    <option value="{{ $contact->id }}"
                                                        {{ $selectedContactId == $contact->id ? 'selected' : '' }}>
                                                        {{ trim($contact->first_name.' '.$contact->last_name) ?: 'Contact #'.$contact->id }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @if ($selectedContactId)
                                                <input type="hidden" name="contact_id"
                                                    value="{{ $selectedContactId }}">
                                                {{-- Add hidden input to submit contact ID when disabled --}}
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-12 activity-related-grid">
                                        <div class="d-flex align-items-center gap-2 mb-3"><i class="feather-link text-primary"></i><div><div class="fw-bold text-dark">Related Records</div><small class="text-muted">Connect this activity to the appropriate CRM records.</small></div></div>
                                        <div class="row g-3">
                                            <div class="col-md-4"><label class="form-label">Account</label><select class="form-control" name="account_id"><option value="">Select Account</option>@foreach($accounts as $account)<option value="{{ $account->id }}" @selected(old('account_id') == $account->id)>{{ $account->account_name }}</option>@endforeach</select></div>
                                            <div class="col-md-4"><label class="form-label">Project</label><select class="form-control" name="project_id"><option value="">Select Project</option>@foreach($projects as $project)<option value="{{ $project->id }}" @selected(old('project_id') == $project->id)>{{ $project->name }}</option>@endforeach</select></div>
                                            <div class="col-md-4"><label class="form-label">Case</label><select class="form-control" name="case_id"><option value="">Select Case</option>@foreach($cases as $case)<option value="{{ $case->id }}" @selected(old('case_id') == $case->id)>{{ $case->case_number }} — {{ $case->subject }}</option>@endforeach</select></div>
                                        </div>
                                    </div>

                                    <!-- Hidden Inputs for lead_id and deal_id -->
                                    @if ($selectedLeadId)
                                        <input type="hidden" name="lead_id" value="{{ $selectedLeadId }}">
                                    @endif
                                    @if ($selectedDealId)
                                        <input type="hidden" name="deal_id" value="{{ $selectedDealId }}">
                                    @endif
                                    @if ($selectedTicketId)
                                        <input type="hidden" name="ticket_id" value="{{ $selectedTicketId }}">
                                    @endif

                                    <!-- Priority Dropdown -->
                                    <div class="col-lg-6 mb-4" x-show="[1,3,4,6,7,8,9,10].includes(selectedButton)"
                                        x-transition>
                                        <label class="form-label" for="priorityInput">Priority</label>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-award"></i></div>
                                            <select class="form-control" name="priority" id="priorityInput">
                                                <option value="" disabled selected>Priority</option>
                                                @foreach ($priorities as $priority)
                                                    <option value="{{ $priority->id }}">{{ $priority->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>




                                    <!-- Title Field -->
                                    <div class="col-12 mb-4">
                                        <label class="form-label" for="titleInput">Title <span class="text-danger" aria-hidden="true">*</span></label>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-tag"></i></div>
                                            <input type="text" class="form-control" name="title"
                                                id="titleInput" placeholder="Title" value="{{ old('title') }}"
                                                maxlength="255" required aria-required="true">
                                        </div>
                                    </div>

                                    <div class="col-12 mb-4"
                                        x-show="[1, 2, 3, 4, 5, 7, 8].includes(selectedButton)" x-transition>
                                        <label class="form-label" for="descriptionInput">Description</label>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-file-text"></i></div>
                                            <textarea class="form-control" name="description" id="descriptionInput" placeholder="Description"></textarea>
                                        </div>
                                    </div>


                                    <div class="col-lg-6 mb-4" x-show="[6].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-map-pin"></i></div>
                                            <select class="form-control" name="location" id="locationInput">
                                                <option value="" disabled selected>Select Location</option>
                                                @foreach ($countries as $country)
                                                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mb-4" x-show="[6,10].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-users"></i></div>
                                            <select class="form-control" name="customer" id="customerInput">
                                                <option value="" disabled selected>Select Customer</option>
                                                <option value="1">Customer 1</option>
                                                <option value="2">Customer 2</option>
                                                <option value="3">Customer 3</option>
                                                <option value="4">Customer 4</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mb-4" x-show="[6].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-briefcase"></i></div>
                                            <input type="text" class="form-control" name="service"
                                                id="serviceInput" placeholder="Service" />
                                        </div>
                                    </div>


                                    <div class="col-lg-6 mb-4" x-show="[2].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-calendar"></i></div>
                                            <select class="form-control" name="meeting_integration"
                                                id="meetingIntegrationInput">
                                                <option value="" disabled selected>Select Meeting Integration
                                                </option>
                                                @foreach ($meetings as $meeting)
                                                    <option value="{{ $meeting->id }}">{{ $meeting->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>



                                    <div class="col-lg-6 mb-4" x-show="[2].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-calendar"></i></div>
                                            <select class="form-control" name="allDayEventStatus"
                                                id="allDayEventStatus">
                                                <option value="" disabled selected>All Day Event Status</option>
                                                @foreach ($eventStatuses as $status)
                                                    <option value="{{ $status->name }}">{{ $status->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-lg-6 mb-4" x-show="[1].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-user"></i></div>
                                            <input type="text" class="form-control" name="callFrom"
                                                id="callFromInput" placeholder="Call From" />
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mb-4" x-show="[1, 10].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-phone"></i></div>
                                            <input type="text" class="form-control" name="phoneNumber"
                                                id="phoneNumberInput" placeholder="Phone Number" />
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mb-4" x-show="[1, 3, 4, 5, 7, 8].includes(selectedButton)"
                                        x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-flag"></i></div>
                                            <input type="text" class="form-control" name="regarding"
                                                id="regardingInput" placeholder="Regarding" />
                                        </div>
                                    </div>


                                    <div class="col-12 mb-4" x-show="[7].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-map-pin"></i></div>
                                            <input type="text" class="form-control" name="address"
                                                id="addressInput" placeholder="Address" />
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mb-4" x-show="[8].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-printer"></i></div>
                                            <input type="text" class="form-control" name="fax" id="faxInput"
                                                placeholder="Fax" />
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mb-4" x-show="[1, 7, 8].includes(selectedButton)"
                                        x-transition>
                                        <label class="form-label" for="directionInput">Direction</label>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-compass"></i></div>
                                            <select class="form-control" name="direction" id="directionInput">
                                                <option value="">Select Direction</option>
                                                <option value="inbound" @selected(old('direction') === 'inbound')>Inbound</option>
                                                <option value="outbound" @selected(old('direction') === 'outbound')>Outbound</option>
                                            </select>
                                        </div>
                                    </div>


                                    <!-- From Email -->
                                    <div class="col-lg-6 mb-4" x-show="[9].includes(selectedButton)" x-transition>
                                        <label for="fromEmailInput" class="form-label">From Email</label>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-mail"></i></div>
                                            <x-activity-email-sender id="fromEmailInput" />
                                        </div>
                                    </div>

                                    <!-- Email To -->
                                    <div class="col-lg-6 mb-4" x-show="[9].includes(selectedButton)" x-transition>
                                        <label for="emailToInput" class="form-label">Email To</label>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-send"></i></div>
                                            <input type="email" class="form-control" name="email_to"
                                                id="emailToInput" placeholder="Email To" />
                                        </div>
                                    </div>

                                    <!-- Subject -->
                                    <div class="col-lg-12 mb-4" x-show="[9].includes(selectedButton)" x-transition>
                                        <label for="subjectInput" class="form-label">Subject</label>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-align-left"></i></div>
                                            <input type="text" class="form-control" name="subject"
                                                id="subjectInput" placeholder="Subject" />
                                        </div>
                                    </div>

                                    <!-- Email Body -->
                                    <div class="col-lg-12 mb-4" x-show="[9].includes(selectedButton)" x-transition>
                                        <label for="emailBodyInput" class="form-label">Email Body</label>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-file-text"></i></div>
                                            <textarea class="form-control" name="email_body" id="emailBodyInput" rows="5" placeholder="Email Body"></textarea>
                                        </div>
                                    </div>

                                    <!-- Attachment -->
                                    <div class="col-lg-12 mb-4" x-show="[9].includes(selectedButton)" x-transition>
                                        <label for="attachmentInput" class="form-label">Attachment</label>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-paperclip"></i></div>
                                            <input type="file" class="form-control" name="attachment"
                                                id="attachmentInput" />
                                        </div>
                                    </div>

                                    <!-- Company Dropdown -->
                                    <div class="col-lg-6 mb-4" x-show="[10].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-briefcase"></i></div>
                                            <select class="form-control" name="company" id="companyInput">
                                                <option value="" disabled selected>Select Company</option>
                                                @foreach ($companies as $company)
                                                    <option value="{{ $company->id }}">{{ $company->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>


                                    <!-- Owner Dropdown -->
                                    <div class="col-lg-6 mb-4">
                                        <label class="form-label" for="ownerInput">Activity Owner <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-user"></i></div>
                                            <select class="form-control" name="owner" id="ownerInput" required aria-required="true">
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->id }}"
                                                        {{ auth()->id() == $user->id ? 'selected' : '' }}>
                                                        {{ $user->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>


                                    <!-- First Name Field -->
                                    <div class="col-lg-6 mb-4" x-show="[10].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-user"></i></div>
                                            <input type="text" class="form-control" name="first_name"
                                                id="firstNameInput" placeholder="First Name" />
                                        </div>
                                    </div>

                                    <!-- Last Name Field -->
                                    <div class="col-lg-6 mb-4" x-show="[10].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-user"></i></div>
                                            <input type="text" class="form-control" name="last_name"
                                                id="lastNameInput" placeholder="Last Name" />
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mb-4" x-show="[2].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-calendar"></i></div>
                                            <input type="text" class="form-control" name="meeting_details"
                                                id="meetingDetailsInput" placeholder="Meeting Details" />
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mb-4" x-show="[2].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-monitor"></i></div>
                                            <input type="text" class="form-control" name="hosting"
                                                id="hostingInput" placeholder="Hosting" />
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mb-4" x-show="[2].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-link"></i></div>
                                            <select class="form-control" name="related_to" id="relatedToInput">
                                                <option value="" disabled selected>Related To</option>
                                                <option value="1">Lead</option>
                                                <option value="2">Contact</option>
                                                <option value="3">Deal</option>
                                                <option value="4">Account</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mb-4" x-show="[2].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-refresh-ccw"></i></div>
                                            <select class="form-control" name="repeat_type" id="repeatTypeInput">
                                                <option value="" disabled selected>Select Repeat Type</option>
                                                @foreach ($repeats as $repeat)
                                                    <option value="{{ $repeat->id }}">{{ $repeat->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>



                                    <div class="col-lg-6 mb-4" x-show="[2,4].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-users"></i></div>
                                            <select class="form-control" name="participants" id="participantsInput">
                                                <option value="" disabled selected>Select Participants</option>
                                                <option value="1">Lead</option>
                                                <option value="2">Contact</option>
                                                <option value="3">Deal</option>
                                                <option value="4">Account</option>
                                                <option value="5">Users</option>
                                                <option value="6">New Invite Account</option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Duration Field -->
                                    <div class="col-lg-6 mb-4">
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-clock"></i></div>
                                            <input type="text" class="form-control" name="duration"
                                                id="durationInput" placeholder="Duration" />
                                        </div>
                                    </div>

                                    <!-- Due Date Field -->
                                    <div class="col-lg-6 mb-4" x-show="[1, 3, 7, 8, 9, 2].includes(selectedButton)"
                                        x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-calendar"></i></div>
                                            <input type="date" class="form-control" name="due_date"
                                                id="dueDateInput" placeholder="Due Date" />
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mb-4" x-show="[10].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-tag"></i></div>
                                            <input type="text" class="form-control" name="promotion_code"
                                                id="promotionCodeInput" placeholder="Promotion Code" />
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mb-4" x-show="[10].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-target"></i></div>
                                            <select class="form-control" name="related_campaign"
                                                id="relatedCampaignInput">
                                                <option value="" disabled selected>Related Campaign</option>
                                                <option value="1">Campaign 1</option>
                                                <option value="2">Campaign 2</option>
                                                <option value="3">Campaign 3</option>
                                                <option value="4">Campaign 4</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mb-4" x-show="[10].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-code"></i></div>
                                            <input type="text" class="form-control" name="response_code"
                                                id="responseCodeInput" placeholder="Response Code" />
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mb-4" x-show="[10].includes(selectedButton)" x-transition>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-radio"></i></div>
                                            <select class="form-control" name="channel" id="channelInput">
                                                <option value="" disabled selected>Select Channel</option>
                                                <option value="1">Email</option>
                                                <option value="2">SMS</option>
                                                <option value="3">Phone</option>
                                                <option value="4">Social Media</option>
                                                <option value="5">Web</option>
                                                <option value="6">Push Notification</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mb-4" x-show="[10].includes(selectedButton)" x-transition>
                                        <!-- Received On Input -->
                                        <label for="receivedOnInput" class="form-label">Received On</label>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-calendar"></i></div>
                                            <input type="date" class="form-control" name="received_on"
                                                id="receivedOnInput" placeholder="Received On" />
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mb-4" x-show="[10].includes(selectedButton)" x-transition>
                                        <!-- Close By Input -->
                                        <label for="closeByInput" class="form-label">Close By</label>
                                        <div class="input-group">
                                            <div class="input-group-text"><i class="feather-calendar"></i></div>
                                            <input type="date" class="form-control" name="close_by"
                                                id="closeByInput" placeholder="Close By" />
                                        </div>
                                    </div>

                                    {{-- <div class="row mb-4 align-items-center">
                                        <div class="col-lg-6">
                                            <label class="fw-semibold">Status: </label>
                                        </div>
                                        <div class="col-lg-6">
                                            <select class="form-control" name="status"
                                                data-select2-selector="status">
                                                <option value="active" data-bg="bg-success" selected>Active
                                                </option>
                                                <option value="inactive" data-bg="bg-warning">Inactive
                                                </option>
                                                <option value="archived" data-bg="bg-danger">Declined</option>
                                            </select>
                                        </div>
                                    </div> --}}

                                    <div class="row activity-advanced-section">
                                        <div class="col-lg-4 mb-3">
                                            <label class="form-label">Lifecycle Status</label>
                                            <select class="form-control" name="lifecycle_status" required>
                                                <option value="planned">Planned</option><option value="open">Open</option>
                                                <option value="in_progress">In Progress</option><option value="completed">Completed</option>
                                                <option value="cancelled">Cancelled</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-4 mb-3" x-show="[1].includes(selectedButton)">
                                            <label class="form-label">Call Outcome</label>
                                            <select class="form-control" name="outcome">
                                                <option value="">Select</option><option value="interested">Interested</option>
                                                <option value="follow_up_required">Follow-up Required</option><option value="not_interested">Not Interested</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-4 mb-3" x-show="[2].includes(selectedButton)">
                                            <label class="form-label">Meeting Type</label>
                                            <select class="form-control" name="meeting_type">
                                                <option value="">Select</option><option value="online">Online</option>
                                                <option value="physical">Physical</option><option value="phone">Phone</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-6 mb-3">
                                            <label class="form-label">Assigned Employees</label>
                                            <select class="form-control" name="assignee_ids[]" multiple>
                                                @foreach($users as $user)<option value="{{ $user->id }}" @selected($user->id === auth()->id())>{{ $user->name }}</option>@endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-6 mb-3" x-show="[2].includes(selectedButton)">
                                            <label class="form-label">Attendees</label>
                                            <select class="form-control" name="attendee_ids[]" multiple>
                                                @foreach($users as $user)<option value="{{ $user->id }}">{{ $user->name }}</option>@endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-6 mb-3"><label class="form-label">Reminder</label><input class="form-control" type="datetime-local" name="remind_at"></div>
                                        @php
                                            $activityEscalationDefault = \Illuminate\Support\Facades\DB::table('reminder_escalation_settings')
                                                ->where('business_id', auth()->user()->business_id)
                                                ->value('activity_hours') ?: 24;
                                        @endphp
                                        <div class="col-lg-6 mb-3"><label class="form-label">Escalate overdue reminder after</label><select class="form-control" name="reminder_escalation_hours">@foreach([4,12,24,48,72] as $hours)<option value="{{ $hours }}" @selected(old('reminder_escalation_hours',$activityEscalationDefault)==$hours)>{{ $hours }} hours</option>@endforeach</select></div>
                                        <div class="col-lg-6 mb-3"><label class="form-label">Category</label><input class="form-control" name="category"></div>
                                        <div class="col-lg-6 mb-3"><label class="form-label">Agenda</label><textarea class="form-control" name="agenda"></textarea></div>
                                        <div class="col-lg-6 mb-3" x-show="[2].includes(selectedButton)"><label class="form-label">Meeting Location Type</label><select class="form-control" name="meeting_location_type"><option value="">Select</option><option value="office">Office</option><option value="online">Online</option><option value="customer_location">Customer Location</option></select></div><div class="col-lg-6 mb-3" x-show="[2].includes(selectedButton)"><label class="form-label">Meeting Link (Online)</label><input class="form-control" type="url" name="meeting_link" placeholder="https://..."></div>
                                        <div class="col-lg-6 mb-3"><label class="form-label">Completion timestamp</label><input class="form-control" type="datetime-local" name="completed_at" value="{{ old('completed_at') }}"></div>
                                        <div class="col-lg-6 mb-3"><label class="form-label">Next-action decision (required when completed)</label><select class="form-control" name="next_action_type"><option value="">Select</option><option value="follow_up">Create Follow-up</option><option value="todo">Create To-do</option><option value="none">No next action</option></select></div>
                                        <div class="col-lg-6 mb-3"><label class="form-label">Follow-up / To-do title</label><textarea class="form-control" name="next_action"></textarea></div>
                                        <div class="col-lg-6 mb-3"><label class="form-label">No-next-action reason</label><textarea class="form-control" name="no_next_action_reason"></textarea></div>
                                        <div class="col-lg-6 mb-3" x-show="[2].includes(selectedButton)"><label class="form-label">Attendee Result (required when completed)</label><select class="form-control" name="attendee_result"><option value="">Select result</option><option value="attended">Attended</option><option value="partially_attended">Partially attended</option><option value="no_show">No show</option><option value="rescheduled">Rescheduled</option></select></div>
                                        <div class="col-lg-6 mb-3">
                                            <label class="form-label">Visibility</label>
                                            <select class="form-control" name="visibility"><option value="private">Private</option><option value="team" selected>Team</option><option value="public">Public</option></select>
                                        </div>
                                        <div class="col-lg-6 mb-3" x-show="[9].includes(selectedButton)"><label class="form-label">CC (comma separated)</label><input class="form-control" name="cc_recipients"></div>
                                        <div class="col-lg-6 mb-3" x-show="[9].includes(selectedButton)"><label class="form-label">BCC (comma separated)</label><input class="form-control" name="bcc_recipients"></div>
                                        <div class="col-lg-6 mb-3" x-show="[9].includes(selectedButton)">
                                            <label class="form-label">Email Template</label>
                                            <select class="form-control" id="emailTemplateSelect">
                                                <option value="">Select template</option>
                                                @foreach($emailTemplates as $template)
                                                    <option value="{{ $template->id }}" data-subject="{{ $template->subject }}" data-body="{{ $template->body }}">{{ $template->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-4 mb-3" x-show="[9].includes(selectedButton)"><label class="form-label">Email Status</label><select class="form-control" name="email_status"><option value="">Select</option><option value="draft">Draft</option><option value="sent">Sent</option><option value="opened">Opened</option><option value="replied">Replied</option><option value="failed">Failed</option></select></div><div class="col-lg-4 mb-3" x-show="[9].includes(selectedButton)"><label class="form-label">Schedule Email</label><input class="form-control" type="datetime-local" name="scheduled_at"></div><div class="col-lg-4 mb-3" x-show="[9].includes(selectedButton)"><label class="form-label">Sent Date / Time</label><input class="form-control" type="datetime-local" name="sent_at"></div>
                                        <div class="col-lg-6 mb-3"><label class="form-label">Attachment</label><input class="form-control" type="file" name="attachment"></div>
                                    </div>

                                    </fieldset>

                                    <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper activity-form-actions">
                                        <a href="{{ route('schedule-activity') }}" class="btn btn-light">Cancel</a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="feather-activity me-2"></i>
                                            <span>Create Activity</span>
                                        </button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>



                    {{-- <div class="content-sidebar-body ">
                        <div id="lnb-calendars" class="lnb-calendars">

                            <div class="lnb-calendars-item">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="viewAllSchedules"
                                        value="all" checked="checked">
                                    <label class="custom-control-label c-pointer" for="viewAllSchedules">
                                        <span class="fs-13 fw-semibold lh-lg" style="margin-top: -2px">View All
                                            Schedules</span>
                                    </label>
                                </div>
                            </div>
                            <div id="calendarList" class="lnb-calendars-d1">
                                <div class="lnb-calendars-item">
                                    <label><input type="checkbox" class="tui-full-calendar-checkbox-round"
                                            value="1" checked=""><span
                                            style="border-color: #5485e4; background-color: #5485e4"></span><span>Call</span></label>
                                </div>
                                <div class="lnb-calendars-item">
                                    <label><input type="checkbox" class="tui-full-calendar-checkbox-round"
                                            value="2" checked=""><span
                                            style="border-color: #25b865; background-color: #25b865"></span><span>Appointment</span></label>
                                </div>
                                <div class="lnb-calendars-item">
                                    <label><input type="checkbox" class="tui-full-calendar-checkbox-round"
                                            value="3" checked=""><span
                                            style="border-color: rgb(209, 59, 76); background-color: rgb(209, 59, 76)"></span><span>Task</span></label>
                                </div>
                                <div class="lnb-calendars-item">
                                    <label><input type="checkbox" class="tui-full-calendar-checkbox-round"
                                            value="4" checked=""><span
                                            style="border-color: #17a2b8; background-color: #17a2b8"></span><span>Event</span></label>
                                </div>
                                <div class="lnb-calendars-item">
                                    <label><input type="checkbox" class="tui-full-calendar-checkbox-round"
                                            value="5" checked=""><span
                                            style="border-color: #e49e3d; background-color: #e49e3d"></span><span>Deadline</span></label>
                                </div>
                                <div class="lnb-calendars-item">
                                    <label><input type="checkbox" class="tui-full-calendar-checkbox-round"
                                            value="6" checked=""><span
                                            style="border-color: #5856d6; background-color: #5856d6"></span><span>Other
                                            Activity</span></label>
                                </div>
                                <div class="lnb-calendars-item">
                                    <label><input type="checkbox" class="tui-full-calendar-checkbox-round"
                                            value="7" checked=""><span
                                            style="border-color: #3dc7be; background-color: #3dc7be"></span><span>Letter</span></label>
                                </div>
                                <div class="lnb-calendars-item">
                                    <label><input type="checkbox" class="tui-full-calendar-checkbox-round"
                                            value="8" checked=""><span
                                            style="border-color: #475e77; background-color: #475e77"></span><span>Fax</span></label>
                                </div>
                                <div class="lnb-calendars-item">
                                    <label><input type="checkbox" class="tui-full-calendar-checkbox-round"
                                            value="9" checked=""><span
                                            style="border-color: #17a2b8; background-color: #17a2b8"></span><span>Email</span></label>
                                </div>
                                <div class="lnb-calendars-item">
                                    <label><input type="checkbox" class="tui-full-calendar-checkbox-round"
                                            value="10" checked=""><span
                                            style="border-color: #e49e3d; background-color: #e49e3d"></span><span>Campaign</span></label>
                                </div>
                            </div>
                        </div>

                    </div> --}}



                </div>





                <!-- [ Content Sidebar  ] end -->
                <!-- [ Main Area  ] start -->

                <div class="content-area activity-calendar-panel" data-scrollbar-target="#psScrollbarInit">
                    <div class="content-area-header sticky-top">
                        <div class="page-header-left d-flex align-items-center gap-2">
                            <a href="javascript:void(0);" class="app-sidebar-open-trigger me-2">
                                <i class="feather-align-left fs-20"></i>
                            </a>
                            <div class="me-3 d-none d-md-block"><div class="fw-bold text-dark">Schedule Preview</div><small class="text-muted">Review existing activities</small></div>
                            <div id="menu" class="d-flex align-items-center justify-content-between">
                                <div class="d-flex calendar-action-btn">
                                    {{-- <div class="dropdown me-1">
                                        <button id="dropdownMenu-calendarType"
                                            class="dropdown-toggle calendar-dropdown-btn" type="button"
                                            data-bs-toggle="dropdown" data-bs-auto-close="outside"
                                            data-bs-offset="0,17">
                                            <i id="calendarTypeIcon"
                                                class="feather-grid calendar-icon fs-12 me-1"></i>
                                            <span id="calendarTypeName">Dropdown</span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu"
                                            aria-labelledby="dropdownMenu-calendarType">
                                            <li role="presentation">
                                                <div class="dropdown-item c-pointer" role="menuitem"
                                                    data-action="toggle-daily">
                                                    <i class="feather-list calendar-icon me-3"></i>
                                                    <span>Daily</span>
                                                </div>
                                            </li>
                                            <li role="presentation">
                                                <div class="dropdown-item c-pointer" role="menuitem"
                                                    data-action="toggle-weekly">
                                                    <i class="feather-umbrella calendar-icon me-3"></i>
                                                    <span>Weekly</span>
                                                </div>
                                            </li>
                                            <li role="presentation">
                                                <div class="dropdown-item c-pointer" role="menuitem"
                                                    data-action="toggle-weeks2">
                                                    <i class="feather-sliders calendar-icon me-3"></i>
                                                    <span>Weeks (2)</span>
                                                </div>
                                            </li>
                                            <li role="presentation">
                                                <div class="dropdown-item" role="menuitem"
                                                    data-action="toggle-weeks3">
                                                    <i class="feather-framer calendar-icon me-3"></i>
                                                    <span>Weeks (3)</span>
                                                </div>
                                            </li>
                                            <li role="presentation">
                                                <div class="dropdown-item c-pointer" role="menuitem"
                                                    data-action="toggle-monthly">
                                                    <i class="feather-grid calendar-icon me-3"></i>
                                                    <span>Monthly</span>
                                                </div>
                                            </li>
                                            <li role="presentation" class="dropdown-divider"></li>
                                            <li role="presentation">
                                                <div class="dropdown-item" role="menuitem"
                                                    data-action="toggle-workweek">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox"
                                                            class="custom-control-input chalendar-checkbox"
                                                            id="viewWeekendsSchedules" value="toggle-workweek"
                                                            checked="checked">
                                                        <label class="custom-control-label c-pointer"
                                                            for="viewWeekendsSchedules">
                                                            <span class="fs-12 fw-bold">Show Weekends</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </li>
                                            <li role="presentation">
                                                <div class="dropdown-item" role="menuitem"
                                                    data-action="toggle-start-day-1">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox"
                                                            class="custom-control-input chalendar-checkbox"
                                                            id="viewStartSchedules" value="toggle-start-day-1">
                                                        <label class="custom-control-label c-pointer"
                                                            for="viewStartSchedules">
                                                            <span class="fs-12 fw-bold">Start Week on
                                                                Monday</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </li>
                                            <li role="presentation">
                                                <div class="dropdown-item" role="menuitem"
                                                    data-action="toggle-narrow-weekend">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox"
                                                            class="custom-control-input chalendar-checkbox"
                                                            id="viewNarrowerSchedules" value="toggle-narrow-weekend">
                                                        <label class="custom-control-label c-pointer"
                                                            for="viewNarrowerSchedules">
                                                            <span class="fs-12 fw-bold">Narrower than
                                                                weekdays</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div> --}}
                                    <div class="menu-navi d-none d-sm-flex">
                                        <button type="button" class="move-today" data-action="move-today">
                                            <i class="feather-clock calendar-icon me-1 fs-12"
                                                data-action="move-today"></i>
                                            <span>Today</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="page-header-right ms-auto">
                            <div class="hstack gap-2">
                                <div id="renderRange" class="render-range d-none d-sm-flex"></div>
                                <div class="btn-group gap-1 menu-navi" role="group">
                                    <button type="button" class="avatar-text avatar-md move-day"
                                        data-action="move-prev">
                                        <i class="feather-chevron-left fs-12" data-action="move-prev"></i>
                                    </button>
                                    <button type="button" class="avatar-text avatar-md move-day"
                                        data-action="move-next">
                                        <i class="feather-chevron-right fs-12" data-action="move-next"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-area-body p-0">
                        <div id="tui-calendar-init"></div>
                    </div>

                    {{-- Legacy duplicate schedule list removed; the calendar above is the single schedule preview.
                    <h2 class="px-4 fs-10 fw-bold text-uppercase my-4 text-muted text-spacing-1 text-truncate-1-line">
                        Events &amp; Schedules</h2>
                    <div style="background-color:#fff;">
                        @foreach ($activities as $activity)
                            <!--! BEGIN: [Events] !-->
                            <div class="p-4 border-top c-pointer single-item schedule-item">
                                <div class="d-flex align-items-start">
                                    <div
                                        class="wd-50 ht-50 bg-soft-success text-success lh-1 d-flex align-items-center justify-content-center flex-column rounded-2 schedule-date">
                                        @php
                                            $date =
                                                $activity->due_date ??
                                                ($activity->start_date ?? $activity->received_on);
                                        @endphp

                                        @if ($date)
                                            <span
                                                class="fs-18 fw-bold mb-1 d-block">{{ \Carbon\Carbon::parse($date)->format('d') }}</span>
                                            <span
                                                class="fs-10 text-semibold text-uppercase d-block">{{ \Carbon\Carbon::parse($date)->format('M') }}</span>
                                        @else
                                            <span class="fs-18 fw-bold mb-1 d-block">N/A</span>
                                            <span class="fs-10 text-semibold text-uppercase d-block">---</span>
                                        @endif
                                    </div>


                                    <div class="ms-3 schedule-body">
                                        <div class="text-dark">
                                            <h6 class="fw-bold my-1 text-truncate-1-line">{{ $activity->title }}
                                            </h6>

                                            <span class="fs-11 fw-normal text-muted">
                                                @if ($activity->start_time && $activity->end_time)
                                                    {{ \Carbon\Carbon::parse($activity->start_time)->format('g:ia') }}
                                                    -
                                                    {{ \Carbon\Carbon::parse($activity->end_time)->format('g:ia') }}
                                                @endif
                                            </span>

                                            <p class="fs-12 fw-normal text-muted my-3 text-truncate-2-line">
                                                {{ $activity->description }}</p>
                                        </div>
                                        <div class="img-group lh-0 ms-3 justify-content-start">
                                            <a href="javascript:void(0)" class="avatar-image avatar-sm"
                                                data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                title="Janette Dalton">
                                                <img src="assets/images/avatar/2.png" class="img-fluid"
                                                    alt="image">
                                            </a>
                                            <a href="javascript:void(0)" class="avatar-image avatar-sm"
                                                data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                title="Michael Ksen">
                                                <img src="assets/images/avatar/3.png" class="img-fluid"
                                                    alt="image">
                                            </a>
                                            <a href="javascript:void(0)" class="avatar-image avatar-sm"
                                                data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                title="Socrates Itumay">
                                                <img src="assets/images/avatar/4.png" class="img-fluid"
                                                    alt="image">
                                            </a>
                                            <a href="javascript:void(0)" class="avatar-image avatar-sm"
                                                data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                title="Marianne Audrey">
                                                <img src="assets/images/avatar/5.png" class="img-fluid"
                                                    alt="image">
                                            </a>
                                            <a href="javascript:void(0)" class="avatar-image avatar-sm"
                                                data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                title="Marianne Audrey">
                                                <img src="assets/images/avatar/6.png" class="img-fluid"
                                                    alt="image">
                                            </a>
                                            <a href="javascript:void(0)" class="avatar-text avatar-sm"
                                                data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                title="Explorer More">
                                                <i class="feather-more-horizontal"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>
                    --}}


                    <!-- [ Footer ] start -->
                    {{-- The application footer is rendered by the main CRM shell. --}}

                    <!-- [ Footer ] end -->
                </div>
                <!-- [ Content Area ] end -->
            </div>


            <!-- [ Main Content ] end -->
        </div>
        @include('layouts.footer')
    </main>

    @php
        $messageBusiness = \App\Models\Business::find(auth()->user()->business_id);
        $messagePhoneTargets = collect();
        foreach ($contacts as $contact) foreach ($contact->contactPhones as $phone) $messagePhoneTargets->push(['value'=>$phone->phone,'label'=>(trim($contact->first_name.' '.$contact->last_name) ?: 'Contact #'.$contact->id).' — '.$phone->phone]);
        foreach ($leads as $lead) foreach ($lead->contactPhones as $phone) $messagePhoneTargets->push(['value'=>$phone->phone,'label'=>(trim($lead->first_name.' '.$lead->last_name) ?: 'Lead #'.$lead->id).' — '.$phone->phone]);
        $messagePhoneTargets = $messagePhoneTargets->filter(fn($item)=>filled($item['value']))->unique('value')->values();
        $messageSocialTargets = collect();
        foreach ($contacts as $contact) foreach ($contact->contactSocialMedia as $social) $messageSocialTargets->push(['value'=>$social->value,'label'=>(trim($contact->first_name.' '.$contact->last_name) ?: 'Contact #'.$contact->id).' — '.($social->socialMediaType?->name ?: 'Social').' — '.$social->value]);
        foreach ($leads as $lead) foreach ($lead->contactSocialMedia as $social) $messageSocialTargets->push(['value'=>$social->value,'label'=>(trim($lead->first_name.' '.$lead->last_name) ?: 'Lead #'.$lead->id).' — '.($social->socialMediaType?->name ?: 'Social').' — '.$social->value]);
        $messageSocialTargets = $messageSocialTargets->filter(fn($item)=>filled($item['value']))->unique('value')->values();
        $messageInternalTargets = $users->map(fn($user)=>['value'=>(string)$user->id,'label'=>$user->name.' — '.$user->email])->values();
    @endphp
    <div class="modal fade" id="createMessageModal" tabindex="-1" aria-labelledby="createMessageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <form class="modal-content" id="createMessageForm" method="POST" action="{{ route('workflow.store', 'messages') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header"><div class="d-flex align-items-center gap-3"><span class="message-modal-icon"><i class="feather-message-square"></i></span><div><h5 class="modal-title fw-bold mb-1" id="createMessageModalLabel">Create Message</h5><p class="text-muted fs-12 mb-0">Create an integrated WhatsApp, SMS, social chat, or internal message.</p></div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>
                <div class="modal-body">
                    <section class="message-section"><div class="message-section-title"><i class="feather-radio text-primary"></i>Channel &amp; Recipients</div><div class="row g-3">
                        <div class="col-md-6"><label class="form-label" for="messageType">Message Type <span class="text-danger">*</span></label><select class="form-select" id="messageType" name="type" required><option value="">Select type</option><option value="whatsapp">WhatsApp — Integration</option><option value="sms">SMS</option><option value="chat">Chat — Social Media Integration</option><option value="internal">Internal</option></select></div>
                        <div class="col-md-6" id="messagePlatformWrap" hidden><label class="form-label" for="messagePlatform">Connected Chat Platform <span class="text-danger">*</span></label><select class="form-select" id="messagePlatform" name="platform"><option value="facebook">Facebook {{ $messageIntegrations->get('facebook')?->enabled ? '— Connected' : '— Not connected' }}</option><option value="instagram">Instagram — Integration required</option><option value="linkedin">LinkedIn — Integration required</option></select></div>
                        <div class="col-md-6" id="messageFromWrap"><label class="form-label" for="messageFrom">From <span class="text-danger">*</span></label><select class="form-select" id="messageFrom" name="from_address"><option value="">Select sender</option>@if(auth()->user()->phone_number)<option value="{{ auth()->user()->phone_number }}">Employee — {{ auth()->user()->name }} — {{ auth()->user()->phone_number }}</option>@endif @if($messageBusiness?->phone)<option value="{{ $messageBusiness->phone }}">Organization — {{ $messageBusiness->name }} — {{ $messageBusiness->phone }}</option>@endif</select></div>
                        <div class="col-md-6"><label class="form-label" for="messageTo">To <span class="text-danger">*</span></label><select class="form-select" id="messageTo" multiple required data-placeholder="Select or enter recipients"></select><input type="hidden" name="to_addresses" id="messageToValue"></div>
                        <div class="col-12"><div class="alert alert-light border mb-0 py-2"><i class="feather-link me-2 text-primary"></i><span id="messageIntegrationState">Select a message type to view its integration channel.</span></div></div>
                    </div></section>
                    <section class="message-section"><div class="message-section-title"><i class="feather-link text-primary"></i>Message Relationship</div><div class="row g-3">
                        <div class="col-12"><label class="form-label" for="messageSubject">Subject <span class="text-danger">*</span></label><input class="form-control" id="messageSubject" name="subject" maxlength="255" required placeholder="Enter message subject"></div>
                        <div class="col-md-5"><label class="form-label" for="messageRelatedType">Related To <span class="text-danger">*</span></label><select class="form-select" id="messageRelatedType" name="related_type" required><option value="">Select module</option><option value="lead">Lead</option><option value="contact">Contact</option><option value="account">Account</option><option value="deal">Deal</option><option value="project">Project</option><option value="case">Case</option></select></div><div class="col-md-7"><label class="form-label" for="messageRelatedRecord">Related Record <span class="text-danger">*</span></label><select class="form-select" id="messageRelatedRecord" name="related_id" required disabled><option value="">Select record</option></select></div>
                        <div class="col-md-6"><label class="form-label" for="messageOwner">Owner <span class="text-danger">*</span></label><select class="form-select" id="messageOwner" name="owner_id" required>@foreach($users as $user)<option value="{{ $user->id }}" @selected($user->id===auth()->id())>{{ $user->name }}</option>@endforeach</select></div><div class="col-md-6"><label class="form-label" for="messageAssignees">Assigned Into <span class="text-danger">*</span></label><select class="form-select" id="messageAssignees" name="assignee_ids[]" multiple required data-placeholder="Select one or more employees">@foreach($users as $user)<option value="{{ $user->id }}" @selected($user->id===auth()->id())>{{ $user->name }}</option>@endforeach</select></div>
                    </div></section>
                    <section class="message-section"><div class="message-section-title"><i class="feather-message-circle text-primary"></i>Content &amp; Delivery</div><div class="row g-3">
                        <div class="col-12"><label class="form-label" for="messageContent">Message Content</label><textarea class="form-control" id="messageContent" name="content" rows="5" required placeholder="Write the message"></textarea></div>
                        <div class="col-md-6"><label class="form-label" for="messageStatus">Status <span class="text-danger">*</span></label><select class="form-select" id="messageStatus" name="status" required><option value="sent">Sent</option><option value="delivered">Delivered</option><option value="read">Read</option><option value="failed">Failed</option></select></div><div class="col-md-6"><label class="form-label" for="messageConversation">Conversation ID</label><input class="form-control" id="messageConversation" name="conversation_id" maxlength="255" placeholder="Automatically groups messages into a conversation"></div>
                        <div class="col-12"><label class="form-label" for="messageAttachment">Attachment</label><input class="form-control" id="messageAttachment" type="file" name="attachment" accept="image/*,audio/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.txt"><small class="text-muted">Attach supporting media or a document up to 10 MB.</small></div>
                    </div></section>
                </div>
                <div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary"><i class="feather-send me-2"></i>Create Message</button></div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="createNoteModal" tabindex="-1" aria-labelledby="createNoteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <form class="modal-content" id="createNoteForm" method="POST" action="{{ route('workflow.store', 'notes') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header"><div class="d-flex align-items-center gap-3"><span class="note-modal-icon"><i class="feather-file-text"></i></span><div><h5 class="modal-title fw-bold mb-1" id="createNoteModalLabel">Create Note</h5><p class="text-muted fs-12 mb-0">Capture a note and connect it to the appropriate CRM record.</p></div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>
                <div class="modal-body">
                    <section class="note-section"><div class="note-section-title"><i class="feather-edit-3 text-primary"></i>Note Details</div><div class="row g-3">
                        <div class="col-md-6"><label class="form-label" for="noteOwner">Owner <span class="text-danger">*</span></label><select class="form-select" id="noteOwner" name="owner_id" required>@foreach($users as $user)<option value="{{ $user->id }}" @selected($user->id===auth()->id())>{{ $user->name }}</option>@endforeach</select></div>
                        <div class="col-md-6"><label class="form-label" for="noteCreatedAt">Date Created &amp; Time</label><input class="form-control bg-light" id="noteCreatedAt" type="datetime-local" value="{{ now()->format('Y-m-d\TH:i') }}" readonly></div>
                        <div class="col-12"><label class="form-label" for="noteTitle">Note Title <span class="text-danger">*</span></label><input class="form-control" id="noteTitle" name="title" maxlength="255" required placeholder="Enter note title"></div>
                        <div class="col-12"><label class="form-label" for="noteContent">Note Content</label><textarea class="form-control" id="noteContent" name="description" rows="5" required placeholder="Write the note"></textarea></div>
                    </div></section>
                    <section class="note-section"><div class="note-section-title"><i class="feather-link text-primary"></i>Relationship &amp; Access</div><div class="row g-3">
                        <div class="col-md-5"><label class="form-label" for="noteRelatedType">Related To <span class="text-danger">*</span></label><select class="form-select" id="noteRelatedType" name="related_type" required><option value="">Select module</option><option value="lead">Lead</option><option value="contact">Contact</option><option value="account">Account</option><option value="deal">Deal</option><option value="project">Project</option><option value="case">Case</option></select></div><div class="col-md-7"><label class="form-label" for="noteRelatedRecord">Related Record <span class="text-danger">*</span></label><select class="form-select" id="noteRelatedRecord" name="related_id" required disabled><option value="">Select record</option></select></div>
                        <div class="col-md-6"><label class="form-label" for="noteVisibility">Visibility <span class="text-danger">*</span></label><select class="form-select" id="noteVisibility" name="visibility" required><option value="private">Private</option><option value="team" selected>Team</option><option value="public">Public</option></select></div>
                        <div class="col-md-6"><label class="form-label" for="noteAttachment">Attachments</label><input class="form-control" id="noteAttachment" type="file" name="attachment" accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt"><small class="text-muted">Attach a file up to 10 MB.</small></div>
                    </div></section>
                </div>
                <div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary"><i class="feather-save me-2"></i>Create Note</button></div>
            </form>
        </div>
    </div>

    @php
        $followUpPreviousActivities = $activities->map(function ($activity) use ($activityTypes) {
            $relations = collect(['contact'=>$activity->contact_id,'lead'=>$activity->lead_id,'deal'=>$activity->deal_id,'account'=>$activity->account_id,'project'=>$activity->project_id,'case'=>$activity->case_id])
                ->filter()->map(fn($id,$type)=>['type'=>$type,'id'=>(int)$id])->values();
            $date = $activity->start_date ?: $activity->due_date ?: $activity->created_at;
            return ['id'=>(int)$activity->id,'title'=>$activity->title ?: 'Activity #'.$activity->id,'type'=>$activityTypes[$activity->activity_type_id] ?? 'Activity','date'=>\Carbon\Carbon::parse($date)->format('d M Y, h:i A'),'relations'=>$relations,'url'=>route('activities.edit',['id'=>$activity->id])];
        })->values();
    @endphp
    <div class="modal fade" id="createFollowUpModal" tabindex="-1" aria-labelledby="createFollowUpModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <form class="modal-content" id="createFollowUpForm" method="POST" action="{{ route('workflow.store', 'follow-ups') }}">
                @csrf
                <input type="hidden" name="status" value="pending"><input type="hidden" name="previous_activity_id" id="followUpPreviousActivityId">
                <div class="modal-header"><div class="d-flex align-items-center gap-3"><span class="follow-up-icon"><i class="feather-repeat"></i></span><div><h5 class="modal-title fw-bold mb-1" id="createFollowUpModalLabel">Create Follow-up</h5><p class="text-muted fs-12 mb-0">Schedule the next action and connect it to previous activity context.</p></div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>
                <div class="modal-body">
                    <section class="follow-up-section"><div class="follow-up-section-title"><i class="feather-edit-3 text-primary"></i>Follow-up Details</div><div class="row g-3">
                        <div class="col-12"><label class="form-label" for="followUpTitle">Follow-up Title <span class="text-danger">*</span></label><input class="form-control" id="followUpTitle" name="title" maxlength="255" required placeholder="Enter follow-up title"></div>
                        <div class="col-md-5"><label class="form-label" for="followUpRelatedType">Related To <span class="text-danger">*</span></label><select class="form-select" id="followUpRelatedType" name="related_type" required><option value="">Select module</option><option value="lead">Lead</option><option value="contact">Contact</option><option value="account">Account</option><option value="deal">Deal</option><option value="project">Project</option><option value="case">Case</option></select></div><div class="col-md-7"><label class="form-label" for="followUpRelatedRecord">Related Record <span class="text-danger">*</span></label><select class="form-select" id="followUpRelatedRecord" name="related_id" required disabled><option value="">Select record</option></select></div>
                        <div class="col-md-6"><label class="form-label" for="followUpOwner">Owner <span class="text-danger">*</span></label><select class="form-select" id="followUpOwner" name="owner_id" required>@foreach($users as $user)<option value="{{ $user->id }}" @selected($user->id===auth()->id())>{{ $user->name }}</option>@endforeach</select></div><div class="col-md-6"><label class="form-label" for="followUpAssignees">Assigned To <span class="text-danger">*</span></label><select class="form-select" id="followUpAssignees" name="assignee_ids[]" multiple required data-placeholder="Select one or more employees">@foreach($users as $user)<option value="{{ $user->id }}" @selected($user->id===auth()->id())>{{ $user->name }}</option>@endforeach</select></div>
                        <div class="col-md-4"><label class="form-label" for="followUpDate">Next Follow-up Date &amp; Time <span class="text-danger">*</span></label><input class="form-control" id="followUpDate" type="datetime-local" name="follow_up_at" value="{{ now()->addDay()->format('Y-m-d\TH:i') }}" required></div><div class="col-md-4"><label class="form-label" for="followUpPriority">Priority <span class="text-danger">*</span></label><select class="form-select" id="followUpPriority" name="priority" required><option value="low">Low</option><option value="medium" selected>Medium</option><option value="high">High</option><option value="urgent">Urgent</option></select></div><div class="col-md-4"><label class="form-label" for="followUpReminder">Reminder</label><input class="form-control" id="followUpReminder" type="datetime-local" name="remind_at"></div>
                        <div class="col-12"><label class="form-label" for="followUpNotes">Note</label><textarea class="form-control" id="followUpNotes" name="notes" rows="4" placeholder="Add follow-up notes"></textarea></div>
                    </div></section>
                    <section class="follow-up-section"><div class="follow-up-section-title"><i class="feather-clock text-primary"></i>Previous Activity for Selected Record</div><div id="followUpPreviousActivities" class="previous-activity-list"><div class="text-muted text-center p-3">Select a related record to see its previous activities.</div></div></section>
                </div>
                <div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary"><i class="feather-repeat me-2"></i>Create Follow-up</button></div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="createTodoModal" tabindex="-1" aria-labelledby="createTodoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <form class="modal-content" id="createTodoForm" method="POST" action="{{ route('workflow.store', 'todos') }}">
                @csrf
                <div class="modal-header"><div class="d-flex align-items-center gap-3"><span class="todo-icon"><i class="feather-check-square"></i></span><div><h5 class="modal-title fw-bold mb-1" id="createTodoModalLabel">Create To-do</h5><p class="text-muted fs-12 mb-0">Create, assign, prioritize, and monitor a CRM to-do item.</p></div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>
                <div class="modal-body">
                    <section class="todo-section"><div class="todo-section-title"><i class="feather-edit-3 text-primary"></i>To-do Details</div><div class="row g-3">
                        <div class="col-12"><label class="form-label" for="todoTitle">To-do Title <span class="text-danger">*</span></label><input class="form-control" id="todoTitle" name="title" maxlength="255" required placeholder="Enter to-do title"></div>
                        <div class="col-12"><label class="form-label" for="todoDescription">Description</label><textarea class="form-control" id="todoDescription" name="description" rows="4" placeholder="Describe the to-do item"></textarea></div>
                        <div class="col-md-5"><label class="form-label" for="todoRelatedType">Related To <span class="text-danger">*</span></label><select class="form-select" id="todoRelatedType" name="related_type" required><option value="">Select module</option><option value="lead">Lead</option><option value="contact">Contact</option><option value="account">Account</option><option value="deal">Deal</option><option value="project">Project</option><option value="case">Case</option></select></div><div class="col-md-7"><label class="form-label" for="todoRelatedRecord">Related Record <span class="text-danger">*</span></label><select class="form-select" id="todoRelatedRecord" name="related_id" required disabled><option value="">Select record</option></select></div>
                    </div></section>
                    <section class="todo-section"><div class="todo-section-title"><i class="feather-users text-primary"></i>Ownership &amp; Schedule</div><div class="row g-3">
                        <div class="col-md-6"><label class="form-label" for="todoOwner">Owner</label><select class="form-select" id="todoOwner" name="owner_id"><option value="">Current user</option>@foreach($users as $user)<option value="{{ $user->id }}" @selected($user->id===auth()->id())>{{ $user->name }}</option>@endforeach</select></div><div class="col-md-6"><label class="form-label" for="todoAssignees">Assigned To <span class="text-danger">*</span></label><select class="form-select" id="todoAssignees" name="assignee_ids[]" multiple required data-placeholder="Select one or more employees">@foreach($users as $user)<option value="{{ $user->id }}" @selected($user->id===auth()->id())>{{ $user->name }}</option>@endforeach</select></div>
                        <div class="col-md-4"><label class="form-label" for="todoPriority">Priority</label><select class="form-select" id="todoPriority" name="priority" required><option value="low">Low</option><option value="medium" selected>Medium</option><option value="high">High</option><option value="urgent">Urgent</option></select></div><div class="col-md-4"><label class="form-label" for="todoDueDate">Due Date</label><input class="form-control" id="todoDueDate" type="datetime-local" name="due_at" value="{{ now()->addDay()->format('Y-m-d\TH:i') }}" required></div><div class="col-md-4"><label class="form-label" for="todoStatus">Status <span class="text-danger">*</span></label><select class="form-select" id="todoStatus" name="status" required><option value="pending">Pending</option><option value="in_progress">In Progress</option><option value="completed">Completed</option></select></div>
                        <div class="col-md-6"><label class="form-label" for="todoReminder">Reminder</label><input class="form-control" id="todoReminder" type="datetime-local" name="remind_at"></div><div class="col-md-6"><label class="form-label" for="todoCategory">Category</label><input class="form-control" id="todoCategory" name="category" maxlength="255" placeholder="Enter category"></div>
                    </div></section>
                </div>
                <div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary"><i class="feather-check-square me-2"></i>Create To-do</button></div>
            </form>
        </div>
    </div>




    <!--! ================================================================ !-->
    <!--! [End] Main Content !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! [Start] Search Modal !-->
    <!--! ================================================================ !-->
    <div class="modal fade-scale" id="searchModal" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-top modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header search-form py-0">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="feather-search fs-4 text-muted"></i>
                        </span>
                        <input type="text" class="form-control search-input-field" placeholder="Search...">
                        <span class="input-group-text">
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </span>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="searching-for mb-5">
                        <h4 class="fs-13 fw-normal text-gray-600 mb-3">I'm searching for...</h4>
                        <div class="row g-1">
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);"
                                    class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-compass"></i>
                                    <span>Recent</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);"
                                    class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-command"></i>
                                    <span>Command</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);"
                                    class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-users"></i>
                                    <span>Peoples</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);"
                                    class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-file"></i>
                                    <span>Files</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);"
                                    class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-video"></i>
                                    <span>Medias</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);"
                                    class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <span>More</span>
                                    <i class="feather-chevron-down"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="recent-result mb-5">
                        <h4 class="fs-13 fw-normal text-gray-600 mb-3">Recnet <span
                                class="badge small bg-gray-200 rounded ms-1 text-dark">3</span></h4>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-airplay fs-5"></i>
                                <div class="fs-13 fw-semibold">CRM dashboard redesign</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">/<i
                                    class="feather-command ms-1"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-file-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">Create new eocument</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">N /<i
                                    class="feather-command ms-1"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-user-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">Invite project colleagues</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">P /<i
                                    class="feather-command ms-1"></i></a>
                        </div>
                    </div>
                    <div class="command-result mb-5">
                        <h4 class="fs-13 fw-normal text-gray-600 mb-3">Command <span
                                class="badge small bg-gray-200 rounded ms-1 text-dark">5</span></h4>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-user fs-5"></i>
                                <div class="fs-13 fw-semibold">My profile</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">P /<i
                                    class="feather-command ms-1"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-users fs-5"></i>
                                <div class="fs-13 fw-semibold">Team profile</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">T /<i
                                    class="feather-command ms-1"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-user-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">Invite colleagues</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">I /<i
                                    class="feather-command ms-1"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-briefcase fs-5"></i>
                                <div class="fs-13 fw-semibold">Create new project</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">CP /<i
                                    class="feather-command ms-1"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-life-buoy fs-5"></i>
                                <div class="fs-13 fw-semibold">Support center</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">SC /<i
                                    class="feather-command ms-1"></i></a>
                        </div>
                    </div>
                    <div class="file-result mb-4">
                        <h4 class="fs-13 fw-normal text-gray-600 mb-3">Files <span
                                class="badge small bg-gray-200 rounded ms-1 text-dark">3</span></h4>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-folder-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">CRM Desing Project <span
                                        class="fs-12 fw-normal text-muted">(56.74 MB)</span></div>
                            </a>
                            <a href="javascript:void(0);" class="file-download"><i class="feather-download"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-folder-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">Admin Dashboard Project <span
                                        class="fs-12 fw-normal text-muted">(46.83 MB)</span></div>
                            </a>
                            <a href="javascript:void(0);" class="file-download"><i class="feather-download"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-folder-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">CRM Dashboard Project <span
                                        class="fs-12 fw-normal text-muted">(68.59 MB)</span></div>
                            </a>
                            <a href="javascript:void(0);" class="file-download"><i class="feather-download"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--! ================================================================ !-->
    <!--! [End] Search Modal !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! [Start] Language Select !-->
    <!--! ================================================================ !-->
    <div class="modal fade-scale" id="languageSelectModal" aria-hidden="true"
        aria-labelledby="languageSelectModalLabel" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="languageSelectModalLabel">Select Language</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/sa.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Arabic </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/bd.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Bengali </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/ch.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Chinese </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/hr.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Croatian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/dk.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Danish </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/nl.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Dutch </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select active">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/us.svg"
                                        alt="" class="img-fluid"></div>
                                <span>English </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/fi.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Filipino </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/fr.svg"
                                        alt="" class="img-fluid"></div>
                                <span>French </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/de.svg"
                                        alt="" class="img-fluid"></div>
                                <span>German </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/il.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Hebrew </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/in.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Hindi </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/id.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Indonesian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/it.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Italian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/jp.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Japanese </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/kr.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Korean </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/ir.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Persian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/pt.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Portuguese </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/ru.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Russian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/es.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Spanish </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/sv.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Swedish </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/tr.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Turkish </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/pk.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Urdo</span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/vi.svg"
                                        alt="" class="img-fluid"></div>
                                <span>Vietnamese</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--! ================================================================ !-->
    <!--! [End] Language Select !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! BEGIN: Downloading Toast !-->
    <!--! ================================================================ !-->
    <div class="position-fixed" style="right: 5px; bottom: 5px; z-index: 999999">
        <div id="toast" class="toast bg-black hide" data-bs-delay="3000" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div
                class="toast-header px-3 bg-transparent d-flex align-items-center justify-content-between border-bottom border-light border-opacity-10">
                <div class="text-white mb-0 mr-auto">Downloading...</div>
                <a href="javascript:void(0)" class="ms-2 mb-1 close fw-normal" data-bs-dismiss="toast"
                    aria-label="Close">
                    <span class="text-white">&times;</span>
                </a>
            </div>
            <div class="toast-body p-3 text-white">
                <h6 class="fs-13 text-white">Project.zip</h6>
                <span class="text-light fs-11">4.2mb of 5.5mb</span>
            </div>
            <div class="toast-footer p-3 pt-0 border-top border-light border-opacity-10">
                <div class="progress mt-3" style="height: 5px">
                    <div class="progress-bar progress-bar-striped progress-bar-animated w-75 bg-dark"
                        role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </div>
    <!--! ================================================================ !-->
    <!--! END: Downloading Toast !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! BEGIN: Theme Customizer !-->
    <!--! ================================================================ !-->
    <div class="theme-customizer">
        <div class="customizer-handle">
            {{-- <a href="javascript:void(0);" class="cutomizer-open-trigger bg-primary">
                <i class="feather-settings"></i>
            </a> --}}
        </div>
        <div class="customizer-sidebar-wrapper">
            <div
                class="customizer-sidebar-header px-4 ht-80 border-bottom d-flex align-items-center justify-content-between">
                <h5 class="mb-0">Theme Settings</h5>
                <a href="javascript:void(0);" class="cutomizer-close-trigger d-flex">
                    <i class="feather-x"></i>
                </a>
            </div>
            <div class="customizer-sidebar-body position-relative p-4" data-scrollbar-target="#psScrollbarInit">
                <!--! BEGIN: [Navigation] !-->
                <div class="position-relative px-3 pb-3 pt-4 mt-3 mb-5 border border-gray-2 theme-options-set">
                    <label
                        class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label"
                        style="top: -12px">Navigation</label>
                    <div class="row g-2 theme-options-items app-navigation" id="appNavigationList">
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-navigation-light"
                                name="app-navigation" value="1" data-app-navigation="app-navigation-light"
                                checked>
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-navigation-light">Light</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-navigation-dark"
                                name="app-navigation" value="2" data-app-navigation="app-navigation-dark">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-navigation-dark">Dark</label>
                        </div>
                    </div>
                </div>
                <!--! END: [Navigation] !-->
                <!--! BEGIN: [Header] !-->
                <div class="position-relative px-3 pb-3 pt-4 mt-3 mb-5 border border-gray-2 theme-options-set mt-5">
                    <label
                        class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label"
                        style="top: -12px">Header</label>
                    <div class="row g-2 theme-options-items app-header" id="appHeaderList">
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-header-light" name="app-header"
                                value="1" data-app-header="app-header-light" checked>
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-header-light">Light</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-header-dark" name="app-header"
                                value="2" data-app-header="app-header-dark">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-header-dark">Dark</label>
                        </div>
                    </div>
                </div>
                <!--! END: [Header] !-->
                <!--! BEGIN: [Skins] !-->
                <div class="position-relative px-3 pb-3 pt-4 mt-3 mb-5 border border-gray-2 theme-options-set">
                    <label
                        class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label"
                        style="top: -12px">Skins</label>
                    <div class="row g-2 theme-options-items app-skin" id="appSkinList">
                        <div class="col-6 text-center position-relative single-option light-button active">
                            <input type="radio" class="btn-check" id="app-skin-light" name="app-skin"
                                value="1" data-app-skin="app-skin-light">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-skin-light">Light</label>
                        </div>
                        <div class="col-6 text-center position-relative single-option dark-button">
                            <input type="radio" class="btn-check" id="app-skin-dark" name="app-skin"
                                value="2" data-app-skin="app-skin-dark">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-skin-dark">Dark</label>
                        </div>
                    </div>
                </div>
                <!--! END: [Skins] !-->
                <!--! BEGIN: [Typography] !-->
                <div class="position-relative px-3 pb-3 pt-4 mt-3 mb-0 border border-gray-2 theme-options-set">
                    <label
                        class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label"
                        style="top: -12px">Typography</label>
                    <div class="row g-2 theme-options-items font-family" id="fontFamilyList">
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-lato" name="font-family"
                                value="1" data-font-family="app-font-family-lato">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-lato">Lato</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-rubik"
                                name="font-family" value="2" data-font-family="app-font-family-rubik">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-rubik">Rubik</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-inter"
                                name="font-family" value="3" data-font-family="app-font-family-inter"
                                checked>
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-inter">Inter</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-cinzel"
                                name="font-family" value="4" data-font-family="app-font-family-cinzel">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-cinzel">Cinzel</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-nunito"
                                name="font-family" value="6" data-font-family="app-font-family-nunito">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-nunito">Nunito</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-roboto"
                                name="font-family" value="7" data-font-family="app-font-family-roboto">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-roboto">Roboto</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-ubuntu"
                                name="font-family" value="8" data-font-family="app-font-family-ubuntu">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-ubuntu">Ubuntu</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-poppins"
                                name="font-family" value="9" data-font-family="app-font-family-poppins">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-poppins">Poppins</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-raleway"
                                name="font-family" value="10" data-font-family="app-font-family-raleway">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-raleway">Raleway</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-system-ui"
                                name="font-family" value="11" data-font-family="app-font-family-system-ui">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-system-ui">System UI</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-noto-sans"
                                name="font-family" value="12" data-font-family="app-font-family-noto-sans">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-noto-sans">Noto Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-fira-sans"
                                name="font-family" value="13" data-font-family="app-font-family-fira-sans">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-fira-sans">Fira Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-work-sans"
                                name="font-family" value="14" data-font-family="app-font-family-work-sans">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-work-sans">Work Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-open-sans"
                                name="font-family" value="15" data-font-family="app-font-family-open-sans">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-open-sans">Open Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-maven-pro"
                                name="font-family" value="16" data-font-family="app-font-family-maven-pro">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-maven-pro">Maven Pro</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-quicksand"
                                name="font-family" value="17" data-font-family="app-font-family-quicksand">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-quicksand">Quicksand</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-montserrat"
                                name="font-family" value="18" data-font-family="app-font-family-montserrat">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-montserrat">Montserrat</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-josefin-sans"
                                name="font-family" value="19" data-font-family="app-font-family-josefin-sans">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-josefin-sans">Josefin Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-ibm-plex-sans"
                                name="font-family" value="20"
                                data-font-family="app-font-family-ibm-plex-sans">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-ibm-plex-sans">IBM Plex Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-source-sans-pro"
                                name="font-family" value="5"
                                data-font-family="app-font-family-source-sans-pro">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-source-sans-pro">Source Sans Pro</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-montserrat-alt"
                                name="font-family" value="21"
                                data-font-family="app-font-family-montserrat-alt">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-montserrat-alt">Montserrat Alt</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-roboto-slab"
                                name="font-family" value="22" data-font-family="app-font-family-roboto-slab">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-roboto-slab">Roboto Slab</label>
                        </div>
                    </div>
                </div>
                <!--! END: [Typography] !-->
            </div>
            <div class="customizer-sidebar-footer px-4 ht-60 border-top d-flex align-items-center gap-2">
                <div class="flex-fill w-50">
                    <a href="javascript:void(0);" class="btn btn-danger"
                        data-style="reset-all-common-style">Reset</a>
                </div>
                <div class="flex-fill w-50">
                    <a href="javascript:void(0);" class="btn btn-primary">Download</a>
                </div>
            </div>
        </div>
    </div>

    <!--! ================================================================ !-->
    <!--! [End] Theme Customizer !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! Footer Script !-->
    <!--! ================================================================ !-->
    <!--! BEGIN: Vendors JS !-->
    <script src="assets/vendors/js/vendors.min.js"></script>
    <!-- vendors.min.js {always must need to be top} -->
    <script src="{{ asset('assets/vendors/js/select2.min.js') }}"></script>
    <script src="assets/vendors/js/tui-code-snippet.min.js"></script>
    <script src="assets/vendors/js/tui-time-picker.min.js"></script>
    <script src="assets/vendors/js/tui-date-picker.min.js"></script>
    <script src="assets/vendors/js/moment.min.js"></script>
    <script src="assets/vendors/js/chance.min.js"></script>
    <script src="assets/vendors/js/tui-calendar.min.js"></script>
    <script src="assets/vendors/js/tui-calendars.min.js"></script>
    <script src="assets/vendors/js/tui-schedules.min.js"></script>
    {{-- <script src="assets/vendors/js/tui-calendar-init.min.js"></script> --}}

    {{-- Legacy calendar initialization replaced by the self-contained preview below.
    <script>
        (function(e, t) {
            var l, n = true;

            // Fetch data and render events in the calendar
            function fetchSchedules() {
                $.ajax({
                    url: @json(route('activities.schedules')),
                    method: 'GET',
                    success: function(response) {
                        var schedules = response.data; // Assuming the response contains 'data'

                        var scheduleDataArray = []; // Array to collect schedules

                        schedules.forEach(function(schedule) {
                            var startDate = schedule.start_date || schedule.due_date;
                            if (!startDate) {
                                console.warn('Skipping event with no start date:', schedule);
                                return; // Skip if no start_date or due_date exists
                            }

                            // Debug: Log the start and end dates to ensure they are valid
                            console.log('Event Date:', startDate);
                            console.log('End Date:', schedule.end_date || schedule.due_date);

                            const scheduleData = {
                                id: schedule.id,
                                title: schedule.title ||
                                    "Untitled Event", // Default title if none provided
                                isAllDay: schedule.isAllDay || false, // Handle if not provided
                                location: schedule.location || "",
                                start: moment(startDate)
                                    .toDate(), // Use moment to ensure correct date format
                                end: moment(schedule.end_date || schedule.due_date)
                                    .toDate(), // Use end_date if provided
                                color: "#ffffff", // Default color (modify as necessary)
                                bgColor: "#3498db", // Default background color (modify as needed)
                                borderColor: "#2980b9" // Default border color (modify as needed)
                            };

                            scheduleDataArray.push(scheduleData); // Add schedule data to the array
                        });

                        // Debug: Log the final scheduleDataArray
                        console.log('Schedule Data Array:', scheduleDataArray);

                        // Now create schedules in the calendar
                        if (scheduleDataArray.length > 0) {
                            l.createSchedules(scheduleDataArray); // Create all schedules in one go
                            l.render(); // Re-render the calendar with new data
                        } else {
                            console.warn('No valid schedules to display.');
                        }
                    },
                    error: function(error) {
                        console.error('Error fetching schedules:', error);
                    }
                });
            }

            // Initialize the calendar
            (l = new tui.Calendar("#tui-calendar-init", {
                defaultView: "month", // You can change this to "week", "day", etc.
                useCreationPopup: n,
                useDetailPopup: true,
                calendars: CalendarList,
                template: {
                    milestone: function(e) {
                        return (
                            '<span class="calendar-font-icon ic-milestone-b"></span> <span style="background-color: ' +
                            e.bgColor +
                            '">' +
                            e.title +
                            "</span>"
                        );
                    },
                    allday: function(e) {
                        return a(e, true);
                    },
                    time: function(e) {
                        return a(e, false);
                    },
                },
            })).on({
                clickMore: function(e) {
                    console.log("clickMore", e);
                },
                clickSchedule: function(e) {
                    console.log("clickSchedule", e);
                },
                clickDayname: function(e) {
                    console.log("clickDayname", e);
                },
                beforeCreateSchedule: function(e) {
                    console.log("beforeCreateSchedule", e);
                    var t = e.calendar || findCalendar(e.calendarId),
                        e = {
                            id: String(chance.guid()),
                            title: e.title,
                            isAllDay: e.isAllDay,
                            start: e.start,
                            end: e.end,
                            category: e.isAllDay ? "allday" : "time",
                            dueDateClass: "",
                            color: t.color,
                            bgColor: t.bgColor,
                            dragBgColor: t.bgColor,
                            borderColor: t.borderColor,
                            location: e.location,
                            isPrivate: e.isPrivate,
                            state: e.state,
                        };
                    if (t) {
                        e.calendarId = t.id;
                        e.color = t.color;
                        e.bgColor = t.bgColor;
                        e.borderColor = t.borderColor;
                    }
                    l.createSchedules([e]);
                    g();
                },
                beforeUpdateSchedule: function(e) {
                    var t = e.schedule,
                        n = e.changes;
                    console.log("beforeUpdateSchedule", e);
                    if (n && !n.isAllDay && "allday" === t.category) {
                        n.category = "time";
                    }
                    l.updateSchedule(t.id, t.calendarId, n);
                    g();
                },
                beforeDeleteSchedule: function(e) {
                    console.log("beforeDeleteSchedule", e);
                    l.deleteSchedule(e.schedule.id, e.schedule.calendarId);
                },
                afterRenderSchedule: function(e) {
                    e.schedule;
                },
                clickTimezonesCollapseBtn: function(e) {
                    console.log("timezonesCollapsed", e);
                    if (e) {
                        l.setTheme({
                            "week.daygridLeft.width": "77px",
                            "week.timegridLeft.width": "77px",
                        });
                    } else {
                        l.setTheme({
                            "week.daygridLeft.width": "60px",
                            "week.timegridLeft.width": "60px",
                        });
                    }
                    return !0;
                },
            });

            // Call fetchSchedules to populate the calendar with real data
            fetchSchedules();

        })(window, tui.Calendar);
    </script>
    --}}

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const calendarElement = document.getElementById('tui-calendar-init');
            if (!calendarElement || !window.tui?.Calendar) return;

            const calendar = new tui.Calendar('#tui-calendar-init', {
                defaultView: 'month',
                useCreationPopup: false,
                useDetailPopup: true,
                isReadOnly: true,
                calendars: window.CalendarList || [{
                    id: '1', name: 'Activities', color: '#fff', bgColor: '#3454d1',
                    dragBgColor: '#3454d1', borderColor: '#3454d1'
                }],
                month: { startDayOfWeek: 1, visibleWeeksCount: 0 },
                taskView: false,
                scheduleView: ['time', 'allday']
            });

            const renderRange = function () {
                const range = document.getElementById('renderRange');
                if (!range) return;
                range.textContent = moment(calendar.getDate().getTime()).format('MMMM YYYY');
            };

            const eventPalette = {
                1: ['#3454d1', '#fff'], 2: ['#0ea5e9', '#fff'], 3: ['#22a06b', '#fff'],
                4: ['#f59e0b', '#fff'], 5: ['#dc3545', '#fff'], 6: ['#64748b', '#fff'],
                7: ['#7c3aed', '#fff'], 8: ['#475569', '#fff'], 9: ['#0891b2', '#fff'],
                10: ['#d97706', '#fff']
            };

            const activityDate = function (date, time) {
                if (!date) return null;
                const parsed = moment(`${date} ${time || '00:00:00'}`, [
                    'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm', moment.ISO_8601
                ], true);
                if (parsed.isValid()) return parsed;
                const fallback = moment(date);
                return fallback.isValid() ? fallback : null;
            };

            const loadSchedules = async function () {
                try {
                    const response = await fetch(@json(route('activities.schedules')), {
                        headers: { 'Accept': 'application/json' }
                    });
                    if (!response.ok) throw new Error(`Calendar request failed (${response.status})`);
                    const payload = await response.json();
                    const schedules = (payload.data || []).map(function (activity) {
                        const start = activityDate(
                            activity.start_date || activity.due_date || activity.received_on || activity.created_at,
                            activity.start_time
                        );
                        if (!start) return null;
                        let end = activityDate(activity.end_date || activity.due_date, activity.end_time);
                        if (!end || end.isBefore(start)) end = start.clone().add(1, 'hour');
                        const [backgroundColor, textColor] = eventPalette[Number(activity.activity_type_id)] || ['#3454d1', '#fff'];
                        const allDay = Boolean(activity.all_day_eventstatus) || (!activity.start_time && !activity.end_time);

                        return {
                            id: String(activity.id),
                            calendarId: '1',
                            title: activity.title || activity.subject || 'Untitled Activity',
                            category: allDay ? 'allday' : 'time',
                            isAllDay: allDay,
                            start: start.toDate(),
                            end: end.toDate(),
                            location: activity.location || '',
                            color: textColor,
                            bgColor: backgroundColor,
                            dragBgColor: backgroundColor,
                            borderColor: backgroundColor,
                            raw: { status: activity.lifecycle_status || activity.status || 'planned' }
                        };
                    }).filter(Boolean);

                    calendar.clear();
                    if (schedules.length) calendar.createSchedules(schedules);
                    calendar.render();
                } catch (error) {
                    console.error('Unable to load activity calendar:', error);
                    calendarElement.innerHTML = '<div class="d-flex h-100 align-items-center justify-content-center p-4 text-center"><div><i class="feather-alert-circle fs-3 text-danger"></i><h6 class="mt-3 mb-1">Calendar unavailable</h6><p class="text-muted mb-0">Activities could not be loaded. Please refresh the page.</p></div></div>';
                }
            };

            document.querySelectorAll('.menu-navi button[data-action]').forEach(function (button) {
                button.addEventListener('click', function () {
                    if (this.dataset.action === 'move-prev') calendar.prev();
                    if (this.dataset.action === 'move-next') calendar.next();
                    if (this.dataset.action === 'move-today') calendar.today();
                    renderRange();
                });
            });

            let resizeTimer;
            window.addEventListener('resize', function () {
                window.clearTimeout(resizeTimer);
                resizeTimer = window.setTimeout(() => calendar.render(), 150);
            });

            renderRange();
            loadSchedules();
        });
    </script>







    <!--! END: Vendors JS !-->
    <!--! BEGIN: Apps Init  !-->
    <script src="assets/js/common-init.min.js"></script>
    <script src="assets/js/apps-calendar-init.min.js"></script>
    <!--! END: Apps Init !-->
    <!--! BEGIN: Theme Customizer  !-->
    <script src="assets/js/theme-customizer-init.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js" defer></script>
    <script>
        document.getElementById('emailTemplateSelect')?.addEventListener('change', function () {
            const option = this.options[this.selectedIndex];
            const form = document.getElementById('createActivityForm');
            if (!option.value || !form) return;
            const subject = form.querySelector('[name="subject"]');
            const body = form.querySelector('[name="email_body"]');
            if (subject) subject.value = option.dataset.subject || '';
            if (body) body.value = option.dataset.body || '';
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (!window.jQuery || !jQuery.fn.select2) return;
            const selectors = [
                '#contactInput', '#ownerInput', '#priorityInput',
                '#createActivityForm select[name="account_id"]',
                '#createActivityForm select[name="project_id"]',
                '#createActivityForm select[name="case_id"]',
                '#createActivityForm select[name="assignee_ids[]"]',
                '#createActivityForm select[name="attendee_ids[]"]'
            ].join(',');

            jQuery(selectors).each(function () {
                const select = jQuery(this);
                if (select.hasClass('select2-hidden-accessible')) select.select2('destroy');
                select.select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    closeOnSelect: !this.multiple,
                    allowClear: !this.required && !this.disabled,
                    placeholder: this.dataset.placeholder || this.options[0]?.text || 'Select an option'
                });
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const recipientSelect = document.getElementById('customEmailTo');
            const recipientValue = document.getElementById('customEmailToValue');
            const status = document.getElementById('customEmailStatus');
            const sentAt = document.getElementById('customEmailSentAt');
            const scheduledAt = document.getElementById('customEmailScheduledAt');
            if (!recipientSelect) return;
            const oldRecipients = (recipientValue.value || '').split(/[,;]+/).map(value => value.trim()).filter(Boolean);
            oldRecipients.forEach(email => {
                let option = Array.from(recipientSelect.options).find(item => item.value === email);
                if (!option) { option = new Option(email, email, true, true); recipientSelect.add(option); }
                option.selected = true;
            });
            const syncRecipients = () => recipientValue.value = Array.from(recipientSelect.selectedOptions).map(option => option.value).join(', ');
            if (window.jQuery && jQuery.fn.select2) {
                jQuery(recipientSelect).select2({ theme: 'bootstrap-5', width: '100%', multiple: true, tags: true, closeOnSelect: false, tokenSeparators: [',', ';'], placeholder: 'Select or enter recipients' }).on('change', syncRecipients);
            }
            recipientSelect.addEventListener('change', syncRecipients);
            const localNow = () => { const date = new Date(); date.setMinutes(date.getMinutes() - date.getTimezoneOffset()); return date.toISOString().slice(0,16); };
            status.addEventListener('change', function () {
                if (this.value === 'draft') sentAt.value = '';
                else if (!sentAt.value && !scheduledAt.value) sentAt.value = localNow();
            });
            scheduledAt.addEventListener('change', function () {
                if (!this.value) return;
                status.value = 'draft'; sentAt.value = '';
                status.dispatchEvent(new Event('input', { bubbles: true }));
            });
            document.getElementById('customEmailTemplate')?.addEventListener('change', function () {
                const option = this.options[this.selectedIndex];
                if (!option.value) return;
                const subject = document.getElementById('customEmailSubject');
                const body = document.getElementById('customEmailComments');
                subject.value = option.dataset.subject || ''; body.value = option.dataset.body || '';
                subject.dispatchEvent(new Event('input', { bubbles: true }));
            });
            document.getElementById('createActivityForm').addEventListener('submit', syncRecipients);
            syncRecipients();
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const relatedRecords = @json($callRelatedRecords->values());
            const phoneTargets = @json($messagePhoneTargets);
            const socialTargets = @json($messageSocialTargets);
            const internalTargets = @json($messageInternalTargets);
            const type = document.getElementById('messageType');
            const platform = document.getElementById('messagePlatform');
            const platformWrap = document.getElementById('messagePlatformWrap');
            const from = document.getElementById('messageFrom');
            const fromWrap = document.getElementById('messageFromWrap');
            const to = document.getElementById('messageTo');
            const toValue = document.getElementById('messageToValue');
            const relationType = document.getElementById('messageRelatedType');
            const relationRecord = document.getElementById('messageRelatedRecord');
            const integrationState = document.getElementById('messageIntegrationState');
            const whatsappConnected = @json((bool) $messageIntegrations->get('whatsapp')?->enabled);
            const facebookConnected = @json((bool) $messageIntegrations->get('facebook')?->enabled);

            function setSelectValue(select, value, label) {
                let option = Array.from(select.options).find(item => item.value === value);
                if (!option) { option = new Option(label || value, value); select.add(option); }
                select.value = value;
            }
            function initialiseRecipientSelect() {
                if (!window.jQuery || !jQuery.fn.select2) return;
                const select = jQuery(to);
                if (select.hasClass('select2-hidden-accessible')) select.select2('destroy');
                select.select2({ theme: 'bootstrap-5', width: '100%', multiple: true, tags: type.value !== 'internal', closeOnSelect: false, tokenSeparators: [',',';'], placeholder: 'Select or enter recipients', dropdownParent: jQuery('#createMessageModal') }).on('change', syncRecipients);
            }
            function syncRecipients() { toValue.value = Array.from(to.selectedOptions).map(option => option.value).join(', '); }
            function renderTargets() {
                const targets = ['whatsapp','sms'].includes(type.value) ? phoneTargets : (type.value === 'chat' ? socialTargets : (type.value === 'internal' ? internalTargets : []));
                to.innerHTML = '';
                targets.forEach(target => to.add(new Option(target.label, target.value)));
                initialiseRecipientSelect(); syncRecipients();
            }
            function syncChannel() {
                platformWrap.hidden = type.value !== 'chat';
                fromWrap.hidden = !['whatsapp','sms'].includes(type.value);
                if (type.value === 'whatsapp') { setSelectValue(platform, 'whatsapp', 'WhatsApp'); if (['facebook','instagram','linkedin','internal'].includes(from.value)) from.value = ''; integrationState.textContent = whatsappConnected ? 'WhatsApp integration is connected.' : 'WhatsApp integration is not connected; the message will be recorded for later delivery.'; }
                if (type.value === 'sms') { setSelectValue(platform, 'sms', 'SMS'); if (['facebook','instagram','linkedin','internal'].includes(from.value)) from.value = ''; integrationState.textContent = 'SMS channel selected. Choose an employee or organization sender number.'; }
                if (type.value === 'chat') { if (!['facebook','instagram','linkedin'].includes(platform.value)) platform.value = 'facebook'; setSelectValue(from, platform.value, platform.options[platform.selectedIndex]?.text || platform.value); integrationState.textContent = platform.value === 'facebook' && facebookConnected ? 'Facebook chat integration is connected.' : `${platform.options[platform.selectedIndex]?.text || 'Social platform'} will be recorded; integration configuration is required for live delivery.`; }
                if (type.value === 'internal') { setSelectValue(platform, 'internal', 'Internal'); setSelectValue(from, @json((string) auth()->id()), @json(auth()->user()->name)); integrationState.textContent = 'Internal CRM message between employees.'; }
                renderTargets();
            }
            function renderRelated() {
                relationRecord.innerHTML = '<option value="">Select record</option>';
                relatedRecords.filter(record => record.type === relationType.value).forEach(record => relationRecord.add(new Option(record.label, record.id)));
                relationRecord.disabled = !relationType.value;
            }
            type.addEventListener('change', syncChannel);
            platform.addEventListener('change', syncChannel);
            to.addEventListener('change', syncRecipients);
            relationType.addEventListener('change', renderRelated);
            document.getElementById('createMessageModal').addEventListener('shown.bs.modal', function () {
                if (window.jQuery && jQuery.fn.select2) {
                    const assignees = jQuery('#messageAssignees');
                    if (!assignees.hasClass('select2-hidden-accessible')) assignees.select2({ theme: 'bootstrap-5', width: '100%', closeOnSelect: false, placeholder: 'Select one or more employees', dropdownParent: jQuery('#createMessageModal') });
                }
            });
            document.getElementById('createMessageForm').addEventListener('submit', function () {
                if (type.value === 'chat') setSelectValue(from, platform.value, platform.options[platform.selectedIndex]?.text || platform.value);
                syncRecipients();
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const records = @json($callRelatedRecords->values());
            const type = document.getElementById('noteRelatedType');
            const record = document.getElementById('noteRelatedRecord');
            if (!type || !record) return;
            type.addEventListener('change', function () {
                record.innerHTML = '<option value="">Select record</option>';
                records.filter(item => item.type === type.value).forEach(item => record.add(new Option(item.label, item.id)));
                record.disabled = !type.value;
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const relatedRecords = @json($callRelatedRecords->values());
            const previousActivities = @json($followUpPreviousActivities);
            const type = document.getElementById('followUpRelatedType');
            const record = document.getElementById('followUpRelatedRecord');
            const list = document.getElementById('followUpPreviousActivities');
            const selectedActivity = document.getElementById('followUpPreviousActivityId');
            if (!type || !record || !list) return;

            function renderRelatedRecords() {
                record.innerHTML = '<option value="">Select record</option>';
                relatedRecords.filter(item => item.type === type.value).forEach(item => record.add(new Option(item.label, item.id)));
                record.disabled = !type.value;
                selectedActivity.value = '';
                renderPreviousActivities();
            }
            function renderPreviousActivities() {
                list.innerHTML = '';
                if (!type.value || !record.value) { list.innerHTML = '<div class="text-muted text-center p-3">Select a related record to see its previous activities.</div>'; return; }
                const matches = previousActivities.filter(activity => activity.relations.some(relation => relation.type === type.value && Number(relation.id) === Number(record.value)));
                if (!matches.length) { list.innerHTML = '<div class="text-muted text-center p-3">No previous activities are linked to this record.</div>'; return; }
                matches.forEach(activity => {
                    const label = document.createElement('label'); label.className = 'previous-activity-item';
                    const row = document.createElement('div'); row.className = 'd-flex align-items-start gap-2';
                    const radio = document.createElement('input'); radio.type = 'radio'; radio.className = 'form-check-input mt-1'; radio.addEventListener('change', () => selectedActivity.value = activity.id);
                    const content = document.createElement('div'); content.className = 'flex-grow-1';
                    const title = document.createElement('div'); title.className = 'fw-semibold text-dark'; title.textContent = activity.title;
                    const meta = document.createElement('small'); meta.className = 'text-muted'; meta.textContent = `${activity.type} · ${activity.date}`;
                    const link = document.createElement('a'); link.href = activity.url; link.target = '_blank'; link.className = 'small text-primary ms-2'; link.textContent = 'Open activity'; link.addEventListener('click', event => event.stopPropagation());
                    content.append(title, meta, link); row.append(radio, content); label.append(row); list.append(label);
                });
            }
            type.addEventListener('change', renderRelatedRecords);
            record.addEventListener('change', function () { selectedActivity.value = ''; renderPreviousActivities(); });
            document.getElementById('createFollowUpModal').addEventListener('shown.bs.modal', function () {
                if (window.jQuery && jQuery.fn.select2) {
                    const assignees = jQuery('#followUpAssignees');
                    if (!assignees.hasClass('select2-hidden-accessible')) assignees.select2({ theme: 'bootstrap-5', width: '100%', closeOnSelect: false, placeholder: 'Select one or more employees', dropdownParent: jQuery('#createFollowUpModal') });
                }
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const records = @json($callRelatedRecords->values());
            const type = document.getElementById('todoRelatedType');
            const record = document.getElementById('todoRelatedRecord');
            if (!type || !record) return;
            type.addEventListener('change', function () {
                record.innerHTML = '<option value="">Select record</option>';
                records.filter(item => item.type === type.value).forEach(item => record.add(new Option(item.label, item.id)));
                record.disabled = !type.value;
            });
            document.getElementById('createTodoModal').addEventListener('shown.bs.modal', function () {
                if (!window.jQuery || !jQuery.fn.select2) return;
                const assignees = jQuery('#todoAssignees');
                if (!assignees.hasClass('select2-hidden-accessible')) assignees.select2({ theme: 'bootstrap-5', width: '100%', closeOnSelect: false, placeholder: 'Select one or more employees', dropdownParent: jQuery('#createTodoModal') });
            });
        });
    </script>

    @stack('scripts')

    <!--! END: Theme Customizer !-->
</body>


<!-- Mirrored from wphtml.com/html/tf/duralux-demo/apps-calendar.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 12 Nov 2024 11:22:19 GMT -->

</html>
