src/ApplicationBundle/Resources/views/pages/dashboard/index_central_landing.html.twig line 1

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  2. <meta name="robots" content="noindex, nofollow">
  3. {% set isConsultant= session[UserConstants.IS_CONSULTANT] is defined? session[UserConstants.IS_CONSULTANT]:0 %}
  4. {% set BUDDYBEE_ADMIN_LEVEL= session[UserConstants.BUDDYBEE_ADMIN_LEVEL] is defined? session[UserConstants.BUDDYBEE_ADMIN_LEVEL]:0 %}
  5. <link rel="stylesheet"
  6.       href="{{ absolute_url(path('dashboard')) }}buddybee_assets/css/imgProgress.css?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  7. <style>
  8.     /*.swiper-slide {*/
  9.     /*    pointer-events: auto;*/
  10.     /*}*/
  12.     /*.swiper-slide-prev,*/
  13.     /*.swiper-slide-next {*/
  14.     /*    pointer-events: auto; !* optional if you want them clickable *!*/
  15.     /*}*/
  17.     /*.swiper-slide-active {*/
  18.     /*    z-index: 2; !* keep top slide visible *!*/
  19.     /*}*/
  21.     /*.swiper-wrapper {*/
  22.     /*    overflow: visible; !* important: allows slide shadows/clicks outside container *!*/
  23.     /*}*/
  26.     .select-center {
  27.         text-align-last: center;
  28.         text-align: center;
  29.     }
  31.     .send-button:hover,
  32.     .send-button:focus,
  33.     .send-button:active {
  34.         background-color: #2673B8;
  35.         color: white;
  36.         outline: none;
  37.         box-shadow: none;
  38.     }
  40.     .modal div[class*="col-md"], .modal div[class*="col-lg"], .modal div[class*="col-xs"], .modal div[class*="col-sm"] {
  41.         margin-bottom: 0px;
  42.     }
  44.     .d-flex {
  45.         display: flex;
  46.     }
  48.     #selectEntityModal {
  50.         box-shadow: 0px 6px 18px rgb(0 0 0 / 9%);
  51.         */ border-radius: 12px;
  52.     }
  54.     #selectEntityModal .modal-body {
  55.         padding: 0 1rem;
  56.     }
  58.     #selectEntityModal p {
  59.         margin-bottom: .5rem;
  60.     }
  62.     /* Style for selected option in selectize */
  63.     .selectize-input {
  64.         padding: 10px;
  65.         font-size: 1rem;
  66.         color: #333;
  67.         border: none;
  68.     }
  70.     #selectEntityModal .selectize-input.items {
  71.         border: 1px solid #d0d0d0;
  72.         padding: 8px 8px;
  73.         display: inline-block;
  74.         width: 100%;
  75.         overflow: hidden;
  76.         position: relative;
  77.         z-index: 1;
  78.         box-sizing: border-box;
  79.         box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
  80.         border-radius: 3px;
  81.     }
  83.     #selectEntityModalForm {
  84.         /*max-width: 500px;*/
  85.         background-color: #ffffff;
  86.         /*margin: 40px auto;*/
  87.         padding: 40px;
  88.         box-shadow: 0px 6px 18px rgb(0 0 0 / 9%);
  89.         /*border-radius: 12px;*/
  90.     }
  92.     #selectEntityModalForm .form-header {
  93.         gap: 5px;
  94.         text-align: center;
  95.         font-size: .9em;
  96.     }
  98.     #selectEntityModalForm .form-header .stepIndicator {
  99.         position: relative;
  100.         flex: 1;
  101.         padding-bottom: 30px;
  102.     }
  104.     #selectEntityModalForm .form-header .stepIndicator.active {
  105.         font-weight: 600;
  106.     }
  108.     #selectEntityModalForm .form-header .stepIndicator.finish {
  109.         font-weight: 600;
  110.         color: #009688;
  111.     }
  113.     #selectEntityModalForm .form-header .stepIndicator::before {
  114.         content: "";
  115.         position: absolute;
  116.         left: 50%;
  117.         bottom: 0;
  118.         transform: translateX(-50%);
  119.         z-index: 9;
  120.         width: 20px;
  121.         height: 20px;
  122.         background-color: #d5efed;
  123.         border-radius: 50%;
  124.         border: 3px solid #ecf5f4;
  125.     }
  127.     #selectEntityModalForm .form-header .stepIndicator.active::before {
  128.         background-color: #a7ede8;
  129.         border: 3px solid #d5f9f6;
  130.     }
  132.     #selectEntityModalForm .form-header .stepIndicator.finish::before {
  133.         background-color: #009688;
  134.         border: 3px solid #b7e1dd;
  135.     }
  137.     #selectEntityModalForm .form-header .stepIndicator::after {
  138.         content: "";
  139.         position: absolute;
  140.         left: 50%;
  141.         bottom: 8px;
  142.         width: 100%;
  143.         height: 3px;
  144.         background-color: #f3f3f3;
  145.     }
  147.     #selectEntityModalForm .form-header .stepIndicator.active::after {
  148.         background-color: #a7ede8;
  149.     }
  151.     #selectEntityModalForm .form-header .stepIndicator.finish::after {
  152.         background-color: #009688;
  153.     }
  155.     #selectEntityModalForm .form-header .stepIndicator:last-child:after {
  156.         display: none;
  157.     }
  159.     #selectEntityModalForm input {
  160.         padding: 15px 20px;
  161.         width: 100%;
  162.         font-size: 1em;
  163.         border: 1px solid #e3e3e3;
  164.         border-radius: 5px;
  165.     }
  167.     #selectEntityModalForm input:focus {
  168.         border: 1px solid #009688;
  169.         outline: 0;
  170.     }
  172.     #selectEntityModalForm input.invalid {
  173.         border: 1px solid #ffaba5;
  174.     }
  176.     #selectEntityModalForm .step {
  177.         display: none;
  178.     }
  180.     #selectEntityModalForm .form-footer {
  181.         overflow: auto;
  182.         gap: 20px;
  183.     }
  185.     #selectEntityModalForm .form-footer button {
  186.         background-color: #1d5b9e;
  187.         border: 1px solid #1d5b9e;
  188.         color: #ffffff;
  189.         border: none;
  190.         padding: 13px 30px;
  191.         font-size: 1em;
  192.         cursor: pointer;
  193.         border-radius: 5px;
  194.         flex: 1;
  195.         margin-top: 5px;
  196.     }
  198.     #selectEntityModalForm .form-footer button:hover {
  199.         opacity: 0.8;
  200.     }
  202.     #selectEntityModalForm .form-footer #promptInfo_prevBtn {
  203.         background-color: #fff;
  204.         color: #009688;
  205.     }
  207.     .box-selector {
  208.         padding: 10px 4px;
  209.         cursor: pointer;
  210.     }
  212.     .box-selector .inside {
  213.         padding: 5px;
  214.         background: white;
  216.         border-radius: 5px;
  217.         -webkit-box-shadow: 10px 10px 48px -24px rgba(14, 26, 87, 1);
  218.         -moz-box-shadow: 10px 10px 48px -24px rgba(14, 26, 87, 1);
  219.         box-shadow: 10px 10px 48px -24px rgba(14, 26, 87, 1);
  221.     }
  223.     .box-selector .inside input {
  224.         cursor: pointer
  225.     }
  227.     .box-selector .inside textarea {
  228.         text-align: center;
  229.         cursor: pointer;
  230.         width: 100%;
  231.         border: none;
  232.         resize: none;
  233.         font-size: 14px;
  234.         color: #1d5b9e;
  235.         font-weight: bold;
  236.     }
  238.     .box-selector.sch_selector_mon .inside,
  239.     .box-selector.sch_selector_day .inside
  240.         /*.box-selector.sch_selector_time .inside*/
  241.     {
  242.         padding: 10px 5px;
  243.     }
  245.     .box-selector.sch_selector_time .inside {
  246.         padding: 4px 5px;
  248.     }
  250.     .step .view_if_has_schedules {
  251.         display: none;
  252.     }
  254.     .box-selector.active:not(.man_sch_selector) .inside {
  255.         border: 2px solid #1d5b9e;
  256.         -webkit-box-shadow: 10px 10px 24px -3px rgba(29, 91, 158, 1);
  257.         -moz-box-shadow: 10px 10px 24px -3px rgba(29, 91, 158, 1);
  258.         box-shadow: 10px 10px 24px -3px rgba(29, 91, 158, 1);
  260.     }
  262.     .box-selector.active.man_sch_selector .inside {
  263.         border: 2px solid #1d5b9e;
  264.         -webkit-box-shadow: none;
  265.         -moz-box-shadow: none;
  266.         box-shadow: none;
  267.     }
  269.     .box-selector.sch_selector_mon.active .inside,
  270.     .box-selector.sch_selector_day.active .inside,
  271.     .box-selector.sch_selector_time.active .inside {
  272.         border: 2px solid #1d5b9e;
  273.         -webkit-box-shadow: 4px 7px 24px -3px rgba(29, 91, 158, 1);
  274.         -moz-box-shadow: 10px 10px 24px -3px rgba(29, 91, 158, 1);
  275.         box-shadow: 4px 7px 24px -3px rgba(29, 91, 158, 1);
  276.     }
  278.     .box-selector .img {
  279.         margin-left: 5px;
  281.     }
  283.     .box-selector .title {
  284.         text-align: center;
  285.         font-size: 13px;
  286.         margin-top: auto;
  287.         margin-bottom: auto;
  288.     }
  290.     .box-selector.paymentMethodSelectorBtn .title {
  291.         text-align: center;
  292.         margin-bottom: 1px;
  293.         font-size: 14px;
  294.     }
  296.     .box-selector .sub-title {
  297.         font-size: 12px;
  298.         color: grey;
  300.     }
  302.     .qr-card {
  303.         position: absolute;
  304.         top: 50%;
  305.         left: 50%;
  306.         transform: translate(-50%, -50%);
  307.         width: min(350px, calc(100vw - 32px));
  308.         margin-top: 10px;
  309.         border-radius: 12px;
  310.         z-index: 1000;
  311.         padding: 10px;
  312.     }
  314.     .qr-card .card {
  315.         border: none;
  316.         background: transparent;
  317.         text-align: center;
  318.     }
  320.     .qr-card img {
  321.         width: 100%;
  322.         margin: 10px auto;
  323.         display: block;
  324.     }
  327.     .hidden {
  328.         display: none;
  329.     }
  331.     /* Flexbox for card container to display them side by side */
  332.     .employee-card-container {
  333.         display: flex;
  334.         justify-content: left; /* Center the cards horizontally */
  335.         gap: 20px; /* Add space between the cards */
  336.         flex-wrap: wrap;
  337.         margin-top: 20px;
  338.     }
  340.     .employee-card {
  341.         padding: 20px;
  342.         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  343.         border-radius: 10px;
  344.         max-width: 320px;
  345.         width: 100%;
  346.         text-align: center;
  347.         display: inline-block;
  348.     }
  350.     .form-group {
  351.         margin-bottom: 10px;
  352.     }
  354.     /* Style for the entire form */
  355.     .form-group {
  356.         margin-bottom: 1.5rem;
  357.     }
  359.     /* Style for the labels */
  360.     .form-group label {
  361.         font-size: .8rem;
  362.         font-weight: 300;
  363.         color: #333;
  364.         margin-bottom: 0.1rem;
  365.         display: block;
  366.     }
  368.     /* Style for the input fields */
  369.     .form-control {
  370.         width: 100%;
  371.         max-width: 100%;
  372.         padding: 0px;
  373.         font-size: 1rem;
  374.         border-radius: 5px;
  375.         box-sizing: border-box;
  376.     }
  378.     /* Hover effect for input fields */
  379.     .form-control:hover {
  380.         border-color: #0056b3;
  381.     }
  383.     /* Focus effect for input fields */
  384.     .form-control:focus {
  385.         border-color: #0056b3;
  386.         outline: none;
  387.     }
  389.     /* Dropdown list customization */
  390.     .selectize-dropdown {
  391.         border-radius: 5px;
  392.         box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  393.         font-size: 1rem;
  394.         max-height: 200px;
  396.     }
  398.     /* Style for selectize items */
  399.     .selectize-dropdown .option {
  400.         padding: 10px;
  401.         font-size: 1rem;
  402.         color: #333;
  403.     }
  405.     /* Hover effect for selectize items */
  406.     .selectize-dropdown .option:hover {
  407.         background-color: #0056b3;
  408.         color: white;
  409.     }
  411.     /* Style for the "Add Employee" and "Close" buttons */
  412.     .btn-primary, .btn-secondary {
  413.         padding: 10px 20px;
  414.         font-size: 1rem;
  415.         border: none;
  416.         border-radius: 5px;
  417.         cursor: pointer;
  418.     }
  420.     /* Style for the primary button */
  421.     .btn-primary {
  422.         color: white;
  423.     }
  425.     /* Hover effect for primary button */
  426.     .btn-primary:hover {
  427.         background-color: #0056b3;
  428.     }
  430.     /* Style for the secondary button */
  431.     .btn-secondary {
  432.         background-color: #6c757d;
  433.         color: white;
  434.     }
  436.     /* Hover effect for secondary button */
  437.     .btn-secondary:hover {
  438.         background-color: #5a6268;
  439.     }
  441.     #selectEntityModal .routineTable {
  442.         text-align: left;
  443.         vertical-align: middle;
  444.     }
  446.     #selectEntityModal .routineTable .icon-delete {
  447.         color: darkred;
  448.         font-weight: bold;
  449.     }
  451.     #selectEntityModal .routineTable .icon-delete .fa {
  452.         padding: 10px;
  453.         border-radius: 39px;
  454.         border: 1px solid #eddcdc;
  455.         width: 34px;
  456.         height: 34px;
  457.         text-align: center;
  458.     }
  460.     #selectEntityModal .routineTable .icon-check {
  461.         color: green;
  462.         font-weight: bold;
  463.     }
  465.     #selectEntityModal .routineTable .icon-check .fa {
  466.         opacity: 0.1;
  467.     }
  469.     #selectEntityModal .routineTable .icon-check.isChecked .fa {
  470.         opacity: 1;
  471.     }
  473.     #selectEntityModal .routineTable .icon-check .fa {
  474.         padding: 10px;
  475.         border-radius: 39px;
  476.         border: 1px solid #eddcdc;
  477.         width: 34px;
  478.         height: 34px;
  479.         text-align: center;
  480.     }
  482.     #selectEntityModal .routineTable {
  483.         text-align: left;
  484.         vertical-align: middle;
  485.     }
  487.     #selectEntityModal .routineTable .icon-delete {
  488.         color: darkred;
  489.         font-weight: bold;
  490.     }
  492.     #selectEntityModal .routineTable .icon-delete .fa {
  493.         padding: 10px;
  494.         border-radius: 39px;
  495.         border: 1px solid #eddcdc;
  496.         width: 34px;
  497.         height: 34px;
  498.         text-align: center;
  499.     }
  501.     #selectEntityModal .routineTable .icon-check {
  502.         color: green;
  503.         font-weight: bold;
  504.     }
  506.     #selectEntityModal .routineTable .icon-check .fa {
  507.         opacity: 0.1;
  508.     }
  510.     #selectEntityModal .routineTable .icon-check.isChecked .fa {
  511.         opacity: 1;
  512.     }
  514.     #selectEntityModal .routineTable .icon-check .fa {
  515.         padding: 10px;
  516.         border-radius: 39px;
  517.         border: 1px solid #eddcdc;
  518.         width: 34px;
  519.         height: 34px;
  520.         text-align: center;
  521.     }
  524.     @media (min-width: 1400px) {
  525.         .dashboard-main .container {
  526.             max-width: 1400px;
  527.         }
  528.     }
  531.     .upcoming_session_image_view {
  532.         height: 60px;
  533.         width: 60px;
  534.         border-radius: 50%;
  535.         background-size: cover !important;
  536.         background-position: center !important;
  537.     }
  539.     .badge.transaction_completed {
  540.         color: #7AE677;
  541.         background-color: #D9FFD8;
  542.         padding: .7rem;
  543.     }
  545.     .badge.transaction_canceled {
  546.         color: #ED4C5C;
  547.         background-color: #FFE3E2;
  548.         padding: .7rem;
  549.     }
  551.     .badge.transaction_pending {
  552.         color: #373A37;
  553.         background-color: #F2F2F2;
  554.         padding: .7rem;
  555.     }
  557.     .small_info .progress {
  558.         height: 1rem;
  559.         border-radius: 0.5rem;
  561.     }
  563.     .small_info .row {
  564.         margin-top: 19px;
  565.         margin-bottom: 20px;
  567.     }
  569.     .small_info .progress_holder {
  570.         margin-top: auto;
  571.         margin-bottom: auto;
  572.         padding: 0px;
  574.     }
  576.     .small_info .value_type {
  577.         margin-bottom: 0px;
  578.         font-size: 18px;
  579.         color: #373A37;
  580.         font-weight: normal;
  581.     }
  583.     .small_info .percent_value {
  584.         text-align: right;
  585.         margin-bottom: 0px;
  586.         font-size: 18px;
  587.         color: #373A37;
  588.         font-weight: normal;
  589.     }
  591.     .small_info .percent_holder {
  592.         margin-top: auto;
  593.         margin-bottom: auto;
  594.         padding-left: 0px;
  595.     }
  597.     .small_info .value_type_holder {
  598.         margin-top: auto;
  599.         margin-bottom: auto;
  601.     }
  603.     .small_info .progress .progress-bar {
  604.         background: #92E3A9;
  605.     }
  607.     .dashboard-main .card {
  608.         margin-bottom: 13px;
  609.     }
  611.     .accordion-button:focus {
  612.         z-index: 3;
  613.         /* border-color: #86b7fe; */
  614.         outline: 0;
  615.         box-shadow: none;
  616.     }
  618.     .accordion-button:not(.collapsed) {
  619.         /*color: #0c63e4;*/
  620.         background-color: white;
  621.         /*box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);*/
  622.     }
  624.     .dial {
  625.         border: 0px;
  626.         width: 0px;
  627.         font-size: 36px !important;
  628.         color: white;
  630.     }
  632.     .rounded_border_card {
  633.         border-radius: 1rem;;
  634.     }
  636.     .status_card {
  637.         border-radius: 1rem;;
  639.     }
  641.     .status_card .card-body {
  642.         padding-bottom: 0;
  644.     }
  646.     .status_card .card-title {
  647.         color: #4B4B4B;
  648.         font-size: 20px;
  649.         font-weight: 400;
  650.         font-family: 'Poppins';
  651.     }
  653.     .status_card .status_value {
  654.         color: #4B4B4B;
  655.         font-size: 60px;
  656.         font-weight: normal;
  657.         font-family: 'Poppins';
  658.     }
  660.     .status_card .col-md-7, .status_card .col-md-5, .status_card .col-md-6 {
  661.         margin-top: auto;
  662.         margin-bottom: auto;
  663.         /*padding: 0;*/
  664.     }
  666.     .status_card .col-md-5 {
  667.         padding-left: 0px;
  668.     }
  670.     .status_card .status_value_trend {
  671.         float: right;
  672.         font-size: 14px;
  673.         font-weight: 400;
  674.         padding: 8px;
  675.         border-radius: 1em;
  676.     }
  678.     .status_value_trend.negative {
  679.         background-color: #FFE4E4;
  680.         color: #F07777;
  681.     }
  683.     .status_value_trend.positive {
  684.         background-color: #C6F1F7;
  685.         color: #137DC3;
  686.     }
  688.     .student_list_card {
  689.         /*border-radius: 1rem;;*/
  691.     }
  693.     .student_list_card .card {
  694.         /*border-radius: 1rem;;*/
  695.         border: none;;
  697.     }
  699.     .student_list_card .card-body {
  700.         padding: 8px;
  701.         border-radius: 13px;
  703.     }
  705.     .student_list_card .card-title {
  706.         color: #4B4B4B;
  707.         font-size: 20px;
  708.         font-weight: 400;
  709.         font-family: 'Poppins';
  711.     }
  713.     .student_list_card .time {
  714.         color: #818181;
  715.         font-size: 16px;
  716.         font-weight: bold;
  717.         font-family: 'Roboto', sans-serif;
  718.         padding-left: 4px;
  720.     }
  722.     .student_list_card .col-md-7,
  723.     .student_list_card .col-md-5,
  724.     .student_list_card .col-md-6,
  725.     .student_list_card .col-md-9,
  726.     .student_list_card .col-md-1,
  727.     .student_list_card .col-md-2,
  728.     .student_list_card .col-md-3 {
  729.         margin-top: auto;
  730.         margin-bottom: auto;
  731.         /*padding: 0;*/
  733.     }
  735.     .student_list_card .col-md-5,
  736.     .student_list_card .col-md-1 {
  737.         padding-left: 0px;
  738.     }
  740.     .student_list_card img {
  741.         width: 100%;
  742.         border-radius: 50%;
  743.     }
  745.     .student_list_card .student_name {
  746.         font-size: 18px;
  747.         font-weight: bold;
  748.         color: #4B4B4B;
  749.         font-family: 'Poppins';
  750.         margin-bottom: 0px;
  751.     }
  753.     .student_list_card .student_interest {
  754.         font-size: 16px;
  755.         font-weight: 400;
  756.         color: #BCC7D8;
  758.         margin-bottom: 0px;;
  759.     }
  761.     .student_list_card .more {
  762.         font-size: 16px;
  763.         font-weight: 400;
  764.         color: #333333;
  765.         margin-bottom: 0px;;
  766.         padding-right: 8px;
  767.     }
  769.     .table > :not(caption) > * > * {
  770.         padding: 1rem 1rem;
  772.     }
  774.     .more {
  775.         font-size: 16px;
  776.         font-weight: 400;
  777.         color: #333333;
  778.         margin-bottom: 0px;;
  779.         padding-right: 8px;
  780.     }
  782.     .custom-icon-btn {
  783.         background-color: #3498db;
  784.         color: white;
  785.         border: none;
  786.         border-radius: 15px;
  787.         text-align: center;
  788.         font-size: 16px;
  789.         font-weight: 500;
  790.     }
  792. </style>
  795. <style>
  796.     /* ── Nordic My Companies ─────────────────────────────────────────────────── */
  797.     :root {
  798.         --n-cream: #F7F5F0;
  799.         --n-dark:  #1A1D2E;
  800.         --n-amber: #C07D2A;
  801.         --n-muted: #6B7280;
  802.         /* Override global blue palette so style.css rules inherit Nordic tokens */
  803.         --global-background-color: #ffffff;
  804.         --primary-color: #1A1D2E;
  805.         --swiper-theme-color: #C07D2A;
  806.     }
  807.     body { background: var(--n-cream) !important; }
  808.     .role-company-page.section { background: var(--n-cream); padding: 48px 0 80px; }
  810.     /* Page heading */
  811.     .section-head-area { text-align: center; margin-bottom: 32px; }
  812.     .section-title,
  813.     .role-company-page .section-title,
  814.     .role-company-page h1.section-title {
  815.         font-family: 'Montserrat', sans-serif !important;
  816.         font-size: clamp(1.6rem,3vw,2.2rem) !important;
  817.         font-weight: 700 !important;
  818.         color: var(--n-dark) !important;
  819.         background: none !important;
  820.         -webkit-background-clip: unset !important;
  821.         -webkit-text-fill-color: var(--n-dark) !important;
  822.         background-clip: unset !important;
  823.         margin: 0;
  824.     }
  826.     /* Tabs */
  827.     .tab-box { display: flex !important; align-items: center; gap: 4px; border-bottom: 2px solid rgba(26,29,46,.1); margin-bottom: 32px; padding-bottom: 0; overflow-x: auto; scrollbar-width: none; }
  828.     .tab-box::-webkit-scrollbar { display: none; }
  829.     .tab-btn.tab-btn-style { background: transparent !important; border: none !important; border-bottom: 3px solid transparent !important; margin-bottom: -2px; padding: 10px 18px; font-family: 'DM Sans', sans-serif; font-size: .875rem; font-weight: 600; color: var(--n-muted) !important; border-radius: 0 !important; cursor: pointer; transition: color .2s, border-color .2s; white-space: nowrap; box-shadow: none !important; }
  830.     .tab-btn.tab-btn-style.active, .tab-btn.tab-btn-style:hover { color: var(--n-dark) !important; border-bottom-color: var(--n-amber) !important; }
  831.     .tab-box .line { display: none; }
  833.     /* Company Swiper cards — !important needed: style.css hardcodes rgba(230,248,250,1) blue */
  834.     .role-company-page .tab-container .content-box .content .card {
  835.         background: #fff !important;
  836.         border: 1.5px solid rgba(26,29,46,.08) !important;
  837.         border-radius: 14px !important;
  838.         box-shadow: 0 4px 24px rgba(26,29,46,.08) !important;
  839.         padding: 20px !important;
  840.         text-align: center;
  841.         transition: box-shadow .2s, transform .2s;
  842.     }
  843.     .role-company-page .tab-container .content-box .content .card:hover {
  844.         box-shadow: 0 8px 32px rgba(26,29,46,.14) !important;
  845.         transform: translateY(-2px);
  846.     }
  847.     /* Active slide: amber border instead of blue */
  848.     .swiper-slide.swiper-slide-active .card {
  849.         border: 2px solid var(--n-amber) !important;
  850.         background-image: none !important; /* remove the old overlay.svg */
  851.     }
  852.     .swiper-slide .card img { width: 64px; height: 64px; border-radius: 10px; object-fit: contain; margin: 0 auto 12px; display: block; }
  853.     .swiper-slide .card h2 { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; color: var(--n-dark) !important; margin: 0 0 8px; }
  854.     .swiper-slide .card .role { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--n-amber); background: rgba(192,125,42,.1); padding: 3px 10px; border-radius: 20px; }
  856.     /* Action buttons — !important: style.css has high-specificity blue rules for these */
  857.     .buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
  858.     .app-btn.button {
  859.         display: inline-flex !important; align-items: center !important; gap: 8px;
  860.         padding: 11px 24px !important; border-radius: 8px !important;
  861.         background: transparent !important;
  862.         color: var(--n-dark) !important;
  863.         border: 1.5px solid rgba(26,29,46,.25) !important;
  864.         font-family: 'DM Sans',sans-serif !important; font-size: .9rem; font-weight: 600;
  865.         cursor: pointer; transition: border-color .2s, color .2s; text-decoration: none;
  866.     }
  867.     .app-btn.button:hover { border-color: var(--n-amber) !important; color: var(--n-amber) !important; }
  868.     .app-btn.button i { color: var(--n-dark) !important; }
  869.     .app-btn.button:hover i { color: var(--n-amber) !important; }
  870.     .create-btn.button {
  871.         display: inline-flex !important; align-items: center !important; gap: 8px;
  872.         padding: 11px 24px !important; border-radius: 8px !important;
  873.         background: var(--n-dark) !important; color: #fff !important;
  874.         border: 1.5px solid transparent !important;
  875.         font-family: 'DM Sans',sans-serif !important; font-size: .9rem; font-weight: 600 !important;
  876.         cursor: pointer; transition: background .2s, transform .15s; text-decoration: none !important;
  877.     }
  878.     .create-btn.button:hover { background: var(--n-amber) !important; color: #fff !important; transform: translateY(-1px); text-decoration: none !important; }
  880.     /* Swiper nav */
  881.     .swiper-button-prev::after, .swiper-button-next::after { color: var(--n-amber) !important; }
  882.     .swiper-pagination-bullet-active { background: var(--n-amber) !important; }
  884.     /* Action links bar (Join / Link / Delete) — override old absolute+blue style */
  885.     .role-company-page .tab-container .content-box .content .links {
  886.         position: relative !important;
  887.         top: auto !important;
  888.         display: flex !important;
  889.         justify-content: center !important;
  890.         align-items: stretch !important;
  891.         max-width: 560px !important;
  892.         width: 100% !important;
  893.         margin: 24px auto 0 !important;
  894.         border: 1.5px solid rgba(26,29,46,.12) !important;
  895.         border-radius: 10px !important;
  896.         background: #fff !important;
  897.         overflow: hidden;
  898.         flex-wrap: nowrap !important;
  899.     }
  900.     .role-company-page .tab-container .content-box .content .links .link {
  901.         display: flex !important;
  902.         align-items: center !important;
  903.         justify-content: center !important;
  904.         gap: 7px;
  905.         flex: 1 1 0;
  906.         padding: 11px 14px !important;
  907.         font-family: 'DM Sans', sans-serif;
  908.         font-size: .82rem;
  909.         font-weight: 600;
  910.         color: var(--n-muted) !important;
  911.         cursor: pointer;
  912.         border-right: 1px solid rgba(26,29,46,.08) !important;
  913.         transition: color .15s, background .15s;
  914.         white-space: nowrap;
  915.     }
  916.     .role-company-page .tab-container .content-box .content .links .link:last-child { border-right: none !important; }
  917.     .role-company-page .tab-container .content-box .content .links .link:hover { color: var(--n-amber) !important; background: rgba(192,125,42,.05); }
  918.     .role-company-page .tab-container .content-box .content .links .link.active { color: var(--n-dark) !important; }
  919.     .role-company-page .tab-container .content-box .content .links .link i { font-size: 14px !important; color: var(--n-amber); padding: 0 !important; }
  921.     /* Onboarding employee cards */
  922.     .employee-card { background: #fff; border-radius: 14px; box-shadow: 0 4px 24px rgba(26,29,46,.08); border: 1px solid rgba(26,29,46,.06); padding: 28px; }
  923.     .employee-card h5 { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--n-dark); }
  924.     .employee-card .form-group label { font-size: .78rem; font-weight: 600; color: var(--n-muted); text-transform: uppercase; letter-spacing: .08em; }
  925.     .employee-card .form-control, .employee-card select.form-control { border: 1.5px solid rgba(26,29,46,.12); border-radius: 8px; padding: 10px 14px; font-family: 'DM Sans', sans-serif; color: var(--n-dark); }
  926.     .employee-card .form-control:focus { border-color: var(--n-amber); box-shadow: 0 0 0 3px rgba(192,125,42,.1); outline: none; }
  928.     /* Buttons inside page */
  929.     .global-button, .send-button { background: var(--n-dark) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 10px 24px !important; font-family: 'DM Sans', sans-serif !important; font-weight: 600 !important; cursor: pointer; transition: background .2s; }
  930.     .global-button:hover, .send-button:hover, .global-button:focus, .send-button:focus { background: var(--n-amber) !important; color: #fff !important; box-shadow: none !important; }
  931.     .global-outline-button.extra-btn { background: transparent !important; color: var(--n-dark) !important; border: 2px solid rgba(26,29,46,.25) !important; border-radius: 8px !important; padding: 9px 20px !important; font-family: 'DM Sans', sans-serif; font-weight: 600; cursor: pointer; }
  932.     .global-outline-button.extra-btn:hover { border-color: var(--n-amber) !important; color: var(--n-amber) !important; }
  934.     /* QR card */
  935.     .qr-card .card { background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(26,29,46,.12); border: 1px solid rgba(26,29,46,.06); }
  937.     /* ── Responsive ──────────────────────────────────────────────────────────── */
  938.     @media (max-width: 768px) {
  939.         .role-company-page.section { padding: 32px 0 60px; }
  940.         .employee-card-container { justify-content: center; }
  941.         .employee-card { max-width: 100%; width: 100%; }
  942.     }
  943.     @media (max-width: 480px) {
  944.         .tab-box { gap: 0; }
  945.         .tab-btn.tab-btn-style { padding: 8px 12px; font-size: .8rem; }
  946.         .employee-card-container { flex-direction: column; align-items: stretch; gap: 16px; }
  947.         .buttons { flex-direction: column; }
  948.         .app-btn.button, .create-btn.button { width: 100%; justify-content: center; }
  949.     }
  950. </style>
  952. <section class="role-company-page section">
  953.     <div class="container">
  955.         <div class="row">
  956.             <div class="col-md-12 d-flex justify-content-center align-items-center">
  957.                 <div class="section-head-area">
  958.                     <h1 class="section-title">Your Role & Company List</h1>
  959.                 </div>
  960.             </div>
  961.         </div>
  963.         <div class="row d-flex justify-content-center align-items-center">
  964.             <div class="tab-container">
  966.                 <div class="tab-box overflow-x-auto">
  967.                     <button class="tab-btn tab-btn-style active " id="role-tab-1">Your Company</button>
  968.                     <button class="tab-btn tab-btn-style " id="role-tab-2">Your Role</button>
  969.                     <button class="tab-btn tab-btn-style " id="role-tab-3">Your Dashboard</button>
  970.                     <button class="tab-btn tab-btn-style " id="add-employee-btn">Onboarding</button>
  971.                     <button class="tab-btn tab-btn-style " id="role-tab-4">Shared Company</button>
  972.                     <button class="tab-btn tab-btn-style " id="role-tab-5">Applied Company</button>
  973.                     <div class="line"></div>
  974.                 </div>
  976.                 <div class="content-box">
  977.                     {# 1st div: your company #}
  978.                     <div class="content active" style="cursor:pointer;">
  980.                         <div class="swiper-container">
  982.                             <div class="swiper-wrapper"></div>
  985.                             {# <div id="selected-counter" class="selected-counter">0 out of 5 Selected</div> #}
  987.                             {# three buttons #}
  988.                             <div class="links">
  989.                                 <div class="link">
  990.                                     <i class='fa fa-user-plus'></i><span>Join this Account</span>
  991.                                 </div>
  992.                                 <div class="link active">
  993.                                     <i class='fa fa-link'></i><span>Link Accounts</span>
  994.                                 </div>
  995.                                 <div class="link active">
  996.                                     <i class='fa fa-trash'></i><span>Delete Account</span>
  997.                                 </div>
  998.                             </div>
  1000.                             <div class="swiper-pagination"></div>
  1002.                             <div class="buttons">
  1003.                                 <button class="app-btn button"><i class="fa-regular fa-user"></i>Apply for Employment
  1004.                                 </button>
  1005.                                 <a class="create-btn button" href="{{ url('create_company') }}">
  1006.                                     <i class="fa-regular fa-building"></i> Create a Company
  1007.                                 </a>
  1008.                             </div>
  1010.                             <div class="swiper-button-prev"></div>
  1011.                             <div class="swiper-button-next"></div>
  1012.                         </div>
  1013.                         {# <div id="selected-counter" class="selected-counter">0 out of 5 Selected</div> #}
  1014.                     </div>
  1015.                     {# 2nd div: your role #}
  1016.                     <div class="content">
  1017.                         {# role #}
  1018.                     </div>
  1019.                     {# 3rd div: your dashboard #}
  1020.                     <div class="content">
  1021.                         {# dashboard #}
  1022.                     </div>
  1023.                     {# 4th div: add employee #}
  1024.                     <div class="content">
  1025.                         <div class="employee-card-container hidden" id="employee-card-container">
  1026.                             {# employee card form #}
  1027.                             <div class="employee-card fade show" id="employee-form-wrapper">
  1028.                                 <div class="" id="employee-card">
  1029.                                     <h5 class='text-center mb-3'>By Generating QR/Link</h5>
  1030.                                     <form id="employee-form ">
  1031.                                         {# user type #}
  1032.                                         <div class="form-group">
  1033.                                             <select id="employee-type" name="qrEmpType"
  1034.                                                     class="form-control p-2 select-center">
  1035.                                                 <option value="">Select User Type</option>
  1036.                                                 <option value="1">Admin</option>
  1037.                                                 <option value="2">User</option>
  1038.                                                 <option value="3">Manager</option>
  1039.                                             </select>
  1040.                                         </div>
  1042.                                         {# select company #}
  1043.                                         <div class="form-group">
  1044.                                             <select id="company-name-qr" class="form-control">
  1045.                                                 <option value="">Select Company</option>
  1046.                                             </select>
  1047.                                         </div>
  1049.                                         {# select employee email #}
  1050.                                         <div class="form-group mt-3">
  1051.                                             <select name="sys_user" class="form-control entityEmp " id="email">
  1052.                                                 <option value="">Select Employee</option>
  1053.                                             </select>
  1054.                                         </div>
  1056.                                         <button type="button" class="global-button fs-6" id="qr-code-button">Generate
  1057.                                         </button>
  1058.                                     </form>
  1060.                                 </div>
  1061.                             </div>
  1062.                             {# end employee card form #}
  1063.                             <div class="employee-card fade show " id="self-qr-form-wrapper">
  1064.                                 <div id="self-qr-card">
  1065.                                     <h5 class='text-center mb-3'>Generate QR for Yourself</h5>
  1066.                                     <form id="self-qr-form">
  1067.                                         <div class="form-group ">
  1068.                                             <label>Your Email</label>
  1069.                                             <input style='' type="email" id="self-email-input"
  1070.                                                    class="form-control email-input" placeholder="Enter your email">
  1071.                                         </div>
  1073.                                         <button type="button" class="global-button fs-6 mt-3" id="generate-self-qr-btn">
  1074.                                             Generate QR
  1075.                                         </button>
  1076.                                     </form>
  1077.                                 </div>
  1078.                             </div>
  1081.                             {# qr card #}
  1082.                             <div class="qr-card" id="qr-code-container" style="display: none; margin-top: 100px">
  1084.                                 <div class="card" style=''>
  1085.                                     <button type="button"
  1086.                                             class="position-absolute top-0 end-0 m-2 p-0 border-0 bg-transparent"
  1087.                                             aria-label="Close">
  1088.                                         <i class="fa-solid fa-circle-xmark fs-4" id="cl-qr-card"></i>
  1089.                                     </button>
  1091.                                     <div class="card-body mt-4">
  1092.                                         <h3 class="text-capitalize" id="qr-company-name"></h3>
  1093.                                         <img id="qr-image" src="" alt="QR Code" class="img-fluid ">
  1094.                                         <p id="message" class="mt-2 text-success fs-5 text-center d-none"></p>
  1095.                                         <button type="button" class=" send-button mt-2 mx-2 fs-6" id="send-qr-button">
  1096.                                             Send Qr
  1097.                                         </button>
  1098.                                         {# working #}
  1099.                                         <button type="button" class="global-outline-button extra-btn mt-2"
  1100.                                                 id="copy-link-button">
  1101.                                             <i class="fas fa-copy" id="close-qr-card"></i></button>
  1103.                                         <!-- Send QR Loader -->
  1104.                                         <div id="send-loader" class="mt-3 d-none text-center">
  1105.                                             <div class="spinner-border text-primary" role="status">
  1106.                                                 <span class="visually-hidden">Loading...</span>
  1107.                                             </div>
  1108.                                         </div>
  1111.                                     </div>
  1113.                                 </div>
  1114.                             </div>
  1115.                             {# qr card end #}
  1117.                         </div>
  1118.                     </div>
  1120.                     {# 5th div: shared company #}
  1121.                     <div class="content">
  1122.                         {# shared company #}
  1123.                     </div>
  1125.                     {# 6th div: applied company #}
  1126.                     <div class="content">
  1127.                         {# applied company #}
  1128.                     </div>
  1129.                 </div>
  1130.             </div>
  1131.         </div>
  1133.     </div>
  1134. </section>
  1136. <script>
  1137.     document.addEventListener("DOMContentLoaded", function () {
  1138.         const accessList = {{ app.session.get('userAccessList', [])|json_encode|raw() }};
  1139.         console.log(accessList);
  1141.         let qruserAccessList = [];
  1143.         function populateCompanyDropdown(selectId) {
  1144.             const selectElement = document.getElementById(selectId);
  1145.             qruserAccessList = accessList.map(company => ({
  1146.                 companyName: company.companyName,
  1147.                 appId: company.appId,
  1148.                 companyId: company.companyId,
  1149.                 userType: company.userType
  1150.             }));
  1151.             selectElement.innerHTML = '<option value="">Select Company</option>';
  1152.             accessList.forEach(function (company) {
  1153.                 const option = document.createElement("option");
  1154.                 option.value = company.companyName;
  1155.                 option.textContent = company.companyName;
  1156.                 selectElement.appendChild(option);
  1157.             });
  1160.             if ($(selectElement)[0].selectize) {
  1161.                 $(selectElement)[0].selectize.destroy();
  1162.             }
  1164.             $(selectElement).selectize({
  1165.                 create: false,
  1166.                 sortField: 'text'
  1167.             });
  1168.         }
  1170.         populateCompanyDropdown("company-name-qr");
  1172.         // generate qr code
  1173.         document.getElementById("qr-code-button").addEventListener("click", function () {
  1174.             var selectedCompany = document.getElementById("company-name-qr").value;
  1175.             var qrCompanyName = document.getElementById("qr-company-name");
  1176.             var userEmail = document.getElementById("email")
  1177.             var qrImage = document.getElementById("qr-image");
  1178.             var qrCodeContainer = document.getElementById("qr-code-container");
  1179.             var selectedCompanyData = qruserAccessList.find(company => company.companyName === selectedCompany);
  1181.             var appId = selectedCompanyData.appId;
  1182.             var companyId = selectedCompanyData.companyId;
  1183.             var userType = selectedCompanyData.userType;
  1184.             var baseUrl = "{{ url('employee_add_by_qr') }}";
  1185.             var connector = baseUrl.includes("?") ? "&" : "?";
  1186.             var finalUrl = baseUrl + connector + "company=" + encodeURIComponent(selectedCompany) + "&appid=" + encodeURIComponent(appId) + "&companyId=" + encodeURIComponent(companyId) + "&userType=" + encodeURIComponent(userType) + "&CompanyQr=1";
  1188.             if (selectedCompany) {
  1189.                 qrCompanyName.textContent = selectedCompany;
  1190.                 $.get("{{ path('generate_qr_div') }}?url=" + encodeURIComponent(finalUrl), function (data) {
  1191.                     $('#qr-image').attr('src', data.html);
  1192.                     $('#qr-code-container').show();
  1193.                 }, "json");
  1194.             } else {
  1195.                 alert("Please select a company to generate the QR code.");
  1196.             }
  1197.         });
  1199.         document.getElementById("cl-qr-card").addEventListener("click", function (event) {
  1200.             event.stopPropagation();
  1201.             document.getElementById("qr-code-container").style.display = "none";
  1202.         });
  1203.         document.getElementById("copy-link-button").addEventListener("click", function (event) {
  1204.             event.stopPropagation();
  1206.             var selectedCompany = document.getElementById("company-name-qr").value;
  1207.             var selectedCompanyData = qruserAccessList.find(company => company.companyName === selectedCompany);
  1209.             var appId = selectedCompanyData.appId;
  1210.             var companyId = selectedCompanyData.companyId;
  1211.             var userType = selectedCompanyData.userType;
  1213.             var baseUrl = "{{ url('employee_add_by_qr') }}";
  1214.             var connector = baseUrl.includes("?") ? "&" : "?";
  1215.             var finalUrl = baseUrl + connector + "company=" + encodeURIComponent(selectedCompany) +
  1216.                 "&appid=" + encodeURIComponent(appId) +
  1217.                 "&companyId=" + encodeURIComponent(companyId) +
  1218.                 "&userType=" + encodeURIComponent(userType);
  1220.             navigator.clipboard.writeText(finalUrl).then(() => {
  1221.                 var qrContainer = document.getElementById("qr-code-container");
  1222.                 var copyMessage = document.getElementById("copy-message");
  1223.                 const qrImage = document.getElementById("qr-image");
  1225.                 if (!copyMessage) {
  1226.                     copyMessage = document.createElement("p");
  1227.                     copyMessage.id = "copy-message";
  1228.                     copyMessage.style.color = "green";
  1229.                     copyMessage.style.marginTop = "0px";
  1230.                     copyMessage.style.fontWeight = "bold";
  1231.                     copyMessage.style.fontSize = "16px";
  1232.                     copyMessage.style.textAlign = "center";
  1234.                     qrImage.insertAdjacentElement("afterend", copyMessage);
  1236.                     //qrContainer.appendChild(copyMessage);
  1237.                 }
  1239.                 copyMessage.textContent = "Link copied to clipboard!";
  1241.                 // remove 'Link copied to clipboard!' after 5 seconds
  1242.                 setTimeout(() => {
  1243.                     copyMessage.remove();
  1244.                     copyMessage = null;
  1245.                 }, 5000);
  1247.             }).catch(err => {
  1248.                 console.error("Failed to copy: ", err);
  1249.             });
  1250.         });
  1252.         document.getElementById("send-qr-button").addEventListener("click", function () {
  1253.             var selectedEmployee = document.getElementById("email").value;
  1254.             var selectedCompany = document.getElementById("company-name-qr").value;
  1255.             var selectedCompanyData = qruserAccessList.find(company => company.companyName === selectedCompany);
  1256.             var appId = selectedCompanyData.appId;
  1257.             var qrImage = document.getElementById("qr-image");
  1259.             var loader = document.getElementById("send-loader"); // loader variable
  1261.             if (!selectedEmployee || !selectedCompany) {
  1262.                 alert("Please select both an employee and a company.");
  1263.                 return;
  1264.             }
  1266.             // Show loader
  1267.             loader.classList.remove("d-none");
  1269.             var formData = new FormData();
  1270.             formData.append('company', selectedCompany);
  1271.             formData.append('email', selectedEmployee);
  1272.             formData.append('qr_image', dataURItoBlob(qrImage.src));
  1273.             formData.append('appid', appId);
  1275.             fetch("{{ path('employee_add_by_qr') }}", {
  1276.                 method: "POST",
  1277.                 body: formData
  1278.             }).then(response => response.json())
  1279.                 .then(data => {
  1280.                     // Hide loader
  1281.                     loader.classList.add("d-none");
  1283.                     if (data.status === 'success') {
  1284.                         window.location.href = "{{ path('central_landing') }}";
  1285.                         alert('QR Code for employee uploaded successfully!');
  1286.                     } else {
  1287.                         alert('Error: ' + data.message);
  1288.                     }
  1289.                 }).catch(error => {
  1290.                 console.error("Error uploading QR Code:", error);
  1291.             });
  1292.         });
  1294.         function dataURItoBlob(dataURI) {
  1295.             var byteString = atob(dataURI.split(',')[1]);
  1296.             var arrayBuffer = new ArrayBuffer(byteString.length);
  1297.             var uintArray = new Uint8Array(arrayBuffer);
  1298.             for (var i = 0; i < byteString.length; i++) {
  1299.                 uintArray[i] = byteString.charCodeAt(i);
  1300.             }
  1301.             return new Blob([uintArray], {type: 'image/png'});
  1302.         }
  1304.         document.getElementById("generate-self-qr-btn").addEventListener("click", function () {
  1305.             const emailInput = document.getElementById("self-email-input").value.trim();
  1306.             const qrCompanyName = document.getElementById("qr-company-name");
  1307.             const qrImage = document.getElementById("qr-image");
  1308.             const qrCodeContainer = document.getElementById("qr-code-container");
  1310.             if (!emailInput) {
  1311.                 alert("Please enter your email to generate the QR code.");
  1312.                 return;
  1313.             }
  1315.             $.get("{{ path('employee_onboard_by_qr_api') }}", {email: emailInput}, function (response) {
  1316.                 if (response.status === 'success') {
  1317.                     const userData = response.data;
  1318.                     const payloadUrl = "{{ url('employee_onboard_by_qr_api') }}?email=" + encodeURIComponent(userData.email) +
  1319.                         "&applicantId=" + encodeURIComponent(userData.id);
  1321.                     $.get("{{ path('generate_qr_div') }}", {url: payloadUrl}, function (qrRes) {
  1322.                         $('#qr-company-name').text(userData.email);
  1323.                         $('#qr-image').attr('src', qrRes.html);
  1324.                         $('#qr-code-container').show();
  1325.                     }, 'json');
  1326.                 } else {
  1327.                     alert(response.message || "User not found.");
  1328.                 }
  1329.             }, "json");
  1330.         });
  1333.         $('.entityEmp').selectize({
  1334.             placeholder: 'Enter Email',
  1335.             multiple: false,
  1336.             valueField: 'value',
  1337.             labelField: 'text',
  1338.             searchField: ['text'],
  1339.             preload: 'focus',
  1340.             load: function (query, callback) {
  1341.                 $.ajax({
  1342.                     url: "https://ourhoneybee.eu/select_data_ajax_public",
  1343.                     type: 'POST',
  1344.                     dataType: 'json',
  1345.                     data: {
  1346.                         query: query,
  1347.                         entity_group: 1,
  1348.                         tableName: "entity_applicant_details",
  1349.                         valueField: "email",
  1350.                         textField: "rendered_text",
  1351.                         renderTextFormat: "__email__",
  1352.                         andOrConditions: [
  1353.                             {type: "like", field: "email", value: query},
  1354.                             {type: "like", field: "firstname", value: query},
  1355.                         ],
  1356.                     },
  1357.                     success: function (res) {
  1358.                         if (res && res.data && Array.isArray(res.data)) {
  1359.                             callback(res.data);
  1360.                         } else {
  1361.                             callback([]);
  1362.                         }
  1363.                     },
  1364.                     error: function () {
  1365.                         callback([]);
  1366.                     }
  1367.                 });
  1368.             },
  1369.         });
  1371.         $("#send-qr-button").click(function () {
  1373.             var selectedEmployee = $(".entityEmp").val();
  1374.             var selectedCompany = $("#company-name-qr").val();
  1375.             if (!selectedEmployee || !selectedCompany) {
  1376.                 alert("Please select both an employee and a company.");
  1377.                 return;
  1378.             }
  1380.             $.ajax({
  1381.                 url: '/central_landing',
  1382.                 type: "POST",
  1383.                 data: {
  1384.                     employee_id: selectedEmployee,
  1385.                     company_name: selectedCompany
  1386.                 },
  1387.                 success: function (response) {
  1388.                     if (response.status === 'success') {
  1390.                         const messageBox = document.getElementById('message');
  1391.                         messageBox.textContent = 'Sent email successfully';
  1392.                         messageBox.classList.remove('d-none'); // Show message
  1394.                         // Hide after 5 seconds
  1395.                         setTimeout(() => {
  1396.                             messageBox.classList.add('d-none');
  1397.                         }, 5000);
  1398.                         window.location.href = "{{ path('central_landing') }}";
  1399.                         alert(response.company_name);
  1400.                     } else {
  1401.                         alert("Unexpected response from server.");
  1402.                     }
  1403.                 },
  1404.                 error: function (error) {
  1405.                     alert("Error sending data!");
  1406.                 }
  1407.             });
  1408.         });
  1409.     });
  1411. </script>
  1414. {# {% include '@Application/footer/central_footer_backup.html.twig' %} #}
  1415. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  1416. <link rel="stylesheet" type="text/css"
  1417.       href="{{ absolute_url(path('dashboard')) }}buddybee_assets/DataTables/datatables.min.css"/>
  1419. <script type="text/javascript"
  1420.         src="{{ absolute_url(path('dashboard')) }}condensed_assets/pagination/pagination.js?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"></script>
  1422. <script type="text/javascript"
  1423.         src="{{ absolute_url(path('dashboard')) }}buddybee_assets/DataTables/datatables.min.js?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"></script>
  1424. <script type="text/javascript" src="{{ absolute_url(path('dashboard')) }}buddybee_assets/js/jquery.countTo.js"></script>
  1425. <script type="text/javascript"
  1426.         src="{{ absolute_url(path('dashboard')) }}buddybee_assets/js/jquery.knob.min.js"></script>
  1428. <script>
  1429.     // open and close qr code
  1430.     document.getElementById('qr-code-button').addEventListener('click', function () {
  1431.         // showing qr card
  1432.         document.getElementById('qr-code-container').style.display = 'block';
  1433.         // hide form
  1434.         document.getElementById('employee-form-wrapper').style.display = 'none';
  1435.     })
  1437.     document.getElementById('cl-qr-card').addEventListener('click', function () {
  1438.         // hide qr card
  1439.         document.getElementById('qr-code-container').style.display = 'none';
  1440.         // showing the form again
  1441.         document.getElementById('employee-form-wrapper').style.display = 'block';
  1442.     })
  1444.     var selectEntityModal = {};
  1445.     var currentTabSelectEntityModal = 0;
  1446.     var accessList = [];
  1448.     {% if app.session.get('userAccessList','') !='' %}
  1449.     accessList ={{ app.session.get('userAccessList','')|json_encode|raw() }}
  1450.             {% endif %}
  1452.         function getUserCompanyList(userGetType) {
  1453.             userGetType = userGetType || '_LOCAL_';
  1454.             var pika_ind_id = "_NA_";
  1455.             $('#selectEntityModal .cg_holder').empty();
  1456.             var userTypeTextObject = {
  1457.                 1: 'Admin',
  1458.                 2: 'User',
  1459.                 3: 'Vendor',
  1460.                 4: 'Customer',
  1461.                 5: 'Management User',
  1462.                 6: 'Group Owner',
  1463.                 7: 'GLobal User',
  1464.                 8: 'Applicant',
  1465.                 9: 'Collaborator',
  1466.             }
  1468.             var placeholderCount=6;
  1470.             if (userGetType === '_LOCAL_') {
  1471.                 $.ajax({
  1472.                     url: BaseURL + "get_users_by_query?queryStr=" + $('#tempUsername').val(),
  1473.                     type: 'POST',
  1474.                     dataType: 'json',
  1475.                     data: {},
  1476.                     error: function () {
  1477.                         // callback();
  1478.                     },
  1479.                     success: function (res) {
  1481.                         if (res.success === true) {
  1483.                             if (res.data.length === 1) {
  1484.                                 var dt = res.data[0];
  1485.                                 $('#gocId').val(dt['gocId']);
  1486.                                 $('#username').val(dt['loginUserName']);
  1487.                                 $('#loginform').submit();
  1488.                             } else {
  1490.                                 for (var jj = 0; jj < res.data.length; jj++) {
  1491.                                     var dt = res.data[jj];
  1494.                                     var ggStr = ' <div class="box-selector cg_selector cg_' + dt['appId'] + '" style="cursor:pointer;"' + ' col-md-12 col-sm-12"' +
  1495.                                         ' data-id="' + dt['gocId'] + '"' +
  1496.                                         ' data-goc-id="' + dt['gocId'] + '"' +
  1497.                                         ' data-user-name="' + dt['loginUserName'] + '"' +
  1498.                                         ' data-gen-class="cg_selector">' +
  1499.                                         '<div class="inside" style="display: flex;">' +
  1500.                                         '<div class="img" style="' +
  1501.                                         "background:url('" + dt['companyLogoUrl'] + "');" +
  1502.                                         'height: 50px;width: 40%;background-position: left;background-size: contain;background-repeat: no-repeat;display: inline-block;">' +
  1503.                                         '</div>' +
  1504.                                         '<h6 class="title" style="height: 2rem; width: 60%;text-align: left;">' + dt['companyName'] +
  1505.                                         ' <p class="sub-title">' + userTypeTextObject[dt['userType']] + '</p></h6>' +
  1506.                                         '</div>' +
  1507.                                         '</div>';
  1509.                                     $('#selectEntityModal .cg_holder').append(ggStr);
  1510.                                 }
  1511.                                 $('#selectEntityModal').modal('show');
  1512.                             }
  1513.                         }
  1514.                     }
  1515.                 });
  1516.             }
  1518.             if (userGetType == '_CENTRAL_') {
  1519.                 {
  1520.                     for (var jj = 0; jj < accessList.length; jj++) {
  1521.                         var dt = accessList[jj];
  1523.                         var ggStr = ' <div class="swiper-slide cg_selector cg_' + dt['appId'] + '" style="cursor:pointer;"' +
  1524.                             ' data-id="' + dt['appId'] + '"' +
  1525.                             ' data-app-id="' + dt['appId'] + '"' +
  1526.                             ' data-goc-id="0"' +
  1527.                             // ' data-user-name="' + dt['loginUserName'] + '" ' +
  1528.                             ' data-gen-class="cg_selector" ' +
  1529.                             ' data-auth-str="' + dt['authenticationStr'] + '" ' +
  1530.                             ' data-server-url="' + dt['serverUrl'] + '" ' +
  1531.                             ' data-cs-token="{{ app.session.get('csToken','') }}" ' +
  1532.                             '>' +
  1533.                             ' <div class="card">' +
  1534.                             // round circle
  1535.                             //'<input type="checkbox" id="check">' +
  1536.                             '<img src="{{ constant('ApplicationBundle\\Constants\\GeneralConstant::HONEYBEE_CENTRAL_SERVER') }}' + dt['companyLogoUrl'] + '" alt=" Logo">' +
  1537.                             '<h2>' + dt['companyName'] + '</h2>' +
  1538.                             ' <div class="role">' + userTypeTextObject[dt['userType']] + '</div>' +
  1539.                             // '<p>Lorem ipsum dolor sit amet ect tur. Blandit donec tortor et et quisq. Lorem ipsum dolor sit amet ect tur. Blandit donec tortor et et quisq. Lorem ipsum ...</p> ' +
  1540.                             // '<a href="#"><i class='bx bx-user-plus'></i>Add Employee</a> ' +
  1541.                             '</div> ' +
  1542.                             '</div>'
  1544.                         $('.swiper-wrapper').append(ggStr);
  1545.                         placeholderCount--;
  1546.                     }
  1548.                 }
  1550.                 for (var jj = 0; jj < placeholderCount; jj++) {
  1551.                     var dt = accessList[jj];
  1553.                     var ggStr = ' <div class="swiper-slide  cg_skip cg_0" style="cursor:pointer;"' +
  1554.                         ' data-id="0' +
  1555.                         ' data-app-id="0"' +
  1556.                         ' data-goc-id="0"' +
  1557.                         // ' data-user-name="' + dt['loginUserName'] + '" ' +
  1558.                         ' data-gen-class="cg_selector" ' +
  1559.                         ' data-auth-str="" ' +
  1560.                         ' data-server-url="" ' +
  1561.                         ' data-cs-token="" ' +
  1562.                         '>' +
  1563.                         ' <div class="card">' +
  1564.                         // round circle
  1565.                         //'<input type="checkbox" id="check">' +
  1566.                         '<img src="{{ constant('ApplicationBundle\\Constants\\GeneralConstant::HONEYBEE_CENTRAL_SERVER') }}/images/company_2.png" alt=" Logo">' +
  1567.                         '<h2><i class="fa fa-plus"></i>Add a Company</h2>' +
  1568.                         ' <div class="role">Add or join a company</div>' +
  1570.                         '</div> ' +
  1571.                         '</div>'
  1573.                     $('.swiper-wrapper').append(ggStr);
  1575.                 }
  1578.                 // swipper issue solved for company clicking issue
  1579.                 // var mySwiper = new Swiper('.swiper-container', {
  1580.                 //     loop: true,
  1581.                 //     speed: 400,
  1582.                 //     effect: "coverflow",
  1583.                 //     centeredSlides: true,
  1584.                 //     slidesPerView: 3,
  1585.                 //     mousewheel: true,
  1586.                 //     allowTouchMove: false, // drag/swipe disabled
  1587.                 //     coverflowEffect: {
  1588.                 //         rotate: 0,
  1589.                 //         stretch: 20,
  1590.                 //         depth: 200,
  1591.                 //         modifier: 2,
  1592.                 //         slideShadows: false,
  1593.                 //     },
  1594.                 //     pagination: {
  1595.                 //         el: ".swiper-pagination",
  1596.                 //         clickable: true,
  1597.                 //     },
  1598.                 //     navigation: {
  1599.                 //         nextEl: ".swiper-button-next",
  1600.                 //         prevEl: ".swiper-button-prev",
  1601.                 //     },
  1602.                 // });
  1605.                 var role_company_page = new Swiper(".role-company-page .content .swiper-container",
  1606.                     {
  1607.                         loop: true,
  1608.                         speed: 400,
  1609.                         effect: "coverflow",
  1610.                         centeredSlides: true,
  1611.                         slidesPerView: 1,
  1612.                         mousewheel: true,
  1613.                         grabCursor: true,
  1614.                         coverflowEffect: {
  1615.                             rotate: 0,
  1616.                             stretch: 20,
  1617.                             depth: 200,
  1618.                             modifier: 2,
  1619.                             slideShadows: false,
  1620.                         },
  1621.                         breakpoints: {
  1622.                             640:  { slidesPerView: 2 },
  1623.                             1024: { slidesPerView: 3 },
  1624.                         },
  1625.                         pagination: {
  1626.                             el: ".swiper-pagination",
  1627.                             clickable: true,
  1628.                         },
  1629.                         navigation: {
  1630.                             nextEl: ".swiper-button-next",
  1631.                             prevEl: ".swiper-button-prev",
  1632.                         },
  1633.                     }
  1634.                 );
  1635.                 // var role_company_page = new Swiper(".role-company-page .content .swiper-container",
  1636.                 //     {
  1638.                 //         loop: true,
  1639.                 //         speed: 400,
  1640.                 //         effect: "coverflow",
  1641.                 //         centeredSlides: true,
  1642.                 //         slidesPerView: 3,
  1643.                 //         mousewheel: true,
  1644.                 //         grabCursor: true,
  1645.                 //         coverflowEffect: {
  1646.                 //             rotate: 0,
  1647.                 //             stretch: 20,
  1648.                 //             depth: 200,
  1649.                 //             modifier: 2,
  1650.                 //             slideShadows: false,
  1651.                 //         },
  1652.                 //
  1653.                 //         pagination: {
  1654.                 //             el: ".swiper-pagination",
  1655.                 //             clickable: true,
  1656.                 //
  1657.                 //         },
  1658.                 //         navigation: {
  1659.                 //             nextEl: ".swiper-button-next",
  1660.                 //             prevEl: ".swiper-button-prev",
  1661.                 //         },
  1662.                 //
  1663.                 //     }
  1664.                 // );
  1666.                 // var mySwiper=role_company_page;
  1668.                 // Stable click for center slide
  1669.                 // document.querySelector('.swiper-container').addEventListener('click', function () {
  1670.                 //     var activeSlide = mySwiper.slides[mySwiper.activeIndex];
  1671.                 //     var serverUrl = activeSlide.getAttribute('data-server-url');
  1672.                 //     var authStr = activeSlide.getAttribute('data-auth-str');
  1673.                 //     var appId = activeSlide.getAttribute('data-app-id');
  1674.                 //     var csToken = activeSlide.getAttribute('data-cs-token');
  1675.                 //
  1676.                 //     if (serverUrl) {
  1677.                 //         window.location.href =
  1678.                 //             serverUrl +
  1679.                 //             '?authStr=' + authStr +
  1680.                 //             '&appId=' + appId +
  1681.                 //             '&csToken=' + csToken;
  1682.                 //     }
  1683.                 // });
  1686.             }
  1688.         }
  1690.     jQuery(document).ready(function () {
  1691.         getUserCompanyList('_CENTRAL_')
  1693.         $(document).on('click', '.box-selector', function () {
  1695.             $('.' + $(this).data('genClass')).removeClass('active')
  1696.             $(this).addClass('active')
  1698.         });
  1700.         $(document).on('click', '.cg_selector', function () {
  1701.             if (typeof $(this).data('authStr') !== 'undefined') {
  1702.                 let serverUrl = $(this).data('serverUrl').replace(/\/$/, ''); // avoid trailing slash
  1703.                 window.location.href = serverUrl + '/switch_app?spd=' + $(this).data('authStr') + '&csToken=' + $(this).data('csToken');
  1704.                 //previous line  window.location.href = $(this).data('serverUrl') + '/switch_app?spd=' + $(this).data('authStr') + '&csToken=' + $(this).data('csToken');
  1705.             } else {
  1706.                 $('#gocId').val($(this).data('gocId'));
  1707.                 $('#username').val($(this).data('userName'));
  1708.                 $('#loginform').submit();
  1709.             }
  1710.         });
  1711.         $(document).on('click', '.cg_skip', function () {
  1714.             window.location.href = '{{ url('create_company') }}';
  1715.             //previous line  window.location.href = $(this).data('serverUrl') + '/switch_app?spd=' + $(this).data('authStr') + '&csToken=' + $(this).data('csToken');
  1717.         });
  1718.         // $(document).on('click', '.applicant_action_selector', function () {
  1719.         //     window.location.href = $(this).data('url')
  1720.         // });
  1721.     });
  1722. </script>