library(shiny)
library(shinyWidgets)
library(echarts4r)
library(bslib)
library(tidyverse)
library(leaflet)

library(readxl)
library(vetiver)
library(janitor)

telco_customer <- readr::read_csv("data/telco_customer_churn_dashboard.csv")
locations <- readxl::read_xlsx("data/telco_customer_churn_location.xlsx") %>% 
  clean_names() %>% 
  select(customer_id, city, latitude, longitude)

ui <- fluidPage(
  tags$head(
    tags$style("
               body {
               background-color: #8ec2ed;
               }")
  ), 
  title = "Customer Churn Prevention Dashboard",
  tabsetPanel(
    tabPanel(h5("Dashboard", style="font-weight:bold;margin-top:5px;margin-bottom:5px;"), 
             h1("Customer Churn Prevention Dashboard", style="font-weight:bold;text-align:center;color:#000;"), 
             fluidRow(
               column(12, 
                      column(2, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       h5("Customer", style="font-weight:bold;margin:0;padding:0;"), 
                                       hr(style="margin:0.5em;padding:0;"), 
                                       h2(scales::number(nrow(telco_customer), big.mark = ","), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
                             )
                      ), 
                      column(2, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       h5("Potential Churn Customer", style="font-weight:bold;margin:0;padding:0;"), 
                                       hr(style="margin:0.5em;padding:0;"), 
                                       h2(paste0(scales::number(sum(telco_customer$churn_label == "Yes"), accuracy = 1, big.mark = ","), " (", scales::percent(sum(telco_customer$churn_label == "Yes")/nrow(telco_customer), accuracy = 0.01), ")"), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
                             )
                      ), 
                      column(2, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       h5("Avg Monthly Charges", style="font-weight:bold;margin:0;padding:0;"), 
                                       hr(style="margin:0.5em;padding:0;"), 
                                       h2(scales::number(mean(telco_customer$monthly_charge), accuracy = 0.01, big.mark = ",", prefix = "$"), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
                             )
                      ), 
                      column(2, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       h5("Total Charges", style="font-weight:bold;margin:0;padding:0;"), 
                                       hr(style="margin:0.5em;padding:0;"), 
                                       h2(scales::number(sum(telco_customer$total_charges), big.mark = ",", prefix = "$"), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
                             )
                      ), 
                      column(2, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       h5("Avg Monthly Long Dist. Chrg", style="font-weight:bold;margin:0;padding:0;"), 
                                       hr(style="margin:0.5em;padding:0;"), 
                                       h2(scales::number(mean(telco_customer$avg_monthly_long_distance_charges), accuracy = 0.01, big.mark = ",", prefix = "$"), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
                             )
                      ), 
                      column(2, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       h5("Avg CLTV", style="font-weight:bold;margin:0;padding:0;"), 
                                       hr(style="margin:0.5em;padding:0;"), 
                                       h2(scales::number(mean(telco_customer$cltv), accuracy = 0.01, big.mark = ","), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
                             )
                      ) 
               )
             ), 
             fluidRow(
               column(4, 
                      h3("Customer Demographics", style="font-weight:bold;text-align:center;color:#fff;"), 
                      column(6, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0 0 0.5em 0;padding:1em;height:200px;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       # h5("% by Gender", style="margin:0;padding:0;"), 
                                       # hr(style="margin:0.5em;padding:0;"), 
                                       telco_customer |> 
                                         count(gender) |>  
                                         mutate(pct = round(n/sum(n)*100, 2)) |> 
                                         e_charts(gender) |> 
                                         e_pie(pct, 
                                               startAngle = 90) |> 
                                         e_title("% by Gender") |> 
                                         e_legend(show = TRUE, type = "plain", orient = "vertical", left = "right") |> 
                                         e_dims(height = 200) |>
                                         e_tooltip(
                                           formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + params.value + '%')
                                                     }")
                                         )
                             )
                      ),
                      column(6, 
                             div(style="display:flex;", 
                                 wellPanel(style="background-color:transparent;text-align:center;margin:0 0.5em 0.5em 0;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                           h5("Sr. Citizen", style="font-weight:bold;margin:0;padding:0;"), 
                                           hr(style="margin:0.5em;padding:0;"), 
                                           h3(telco_customer %>% 
                                                mutate(senior_citizen = age > 65) %>% 
                                                pull(senior_citizen) %>% 
                                                mean() %>% 
                                                scales::percent(accuracy = 0.01), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
                                 ), 
                                 wellPanel(style="background-color:transparent;text-align:center;margin:0 0 0.5em 0.5em;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;",
                                           h5("Married", style="font-weight:bold;margin:0;padding:0;"), 
                                           hr(style="margin:0.5em;padding:0;"), 
                                           h3(telco_customer %>% 
                                                mutate(married = married == "Yes") %>% 
                                                pull(married) %>% 
                                                mean() %>% 
                                                scales::percent(accuracy = 0.01), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
                                 )
                             ), 
                             div(style="display:flex;", 
                                 wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0.5em 0 0;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;",
                                           h5("Dependents", style="font-weight:bold;margin:0;padding:0;"), 
                                           hr(style="margin:0.5em;padding:0;"), 
                                           h3(telco_customer %>% 
                                                mutate(dependents = number_of_dependents > 0) %>% 
                                                pull(dependents) %>% 
                                                mean() %>% 
                                                scales::percent(accuracy = 0.01), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
                                 ), 
                                 wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0 0 0.5em;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;",
                                           h5("Ref Friend", style="font-weight:bold;margin:0;padding:0;"), 
                                           hr(style="margin:0.5em;padding:0;"), 
                                           h3(telco_customer %>% 
                                                mutate(referred_a_friend = referred_a_friend == "Yes") %>% 
                                                pull(referred_a_friend) %>% 
                                                mean() %>% 
                                                scales::percent(accuracy = 0.01), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
                                 )
                             )
                      ),
                      column(12, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0 0 0;padding:0;border-width:medium;box-shadow: 2px 2px #888888;",
                                       uiOutput("map")
                             )
                      )
                      
               ), 
               column(4, 
                      h3("Customer Account Information", style="font-weight:bold;text-align:center;color:#fff;"), 
                      wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:1em;height:200px;border-width:medium;box-shadow: 2px 2px #888888;", 
                                # telco_customer |> 
                                #   count(payment_method) |>  
                                #   mutate(pct = round(n/sum(n)*100, 2)) |> 
                                #   e_charts(payment_method) |> 
                                #   e_pie(pct, 
                                #         startAngle = 120) |> 
                                #   e_title("Payment Method") |> 
                                #   e_legend(show = TRUE, type = "plain", orient = "vertical", left = "right") |> 
                                #   e_dims(height = 200) |> 
                                #   e_tooltip(
                                #     formatter = htmlwidgets::JS("function(params){
                                #                                 return(params.name + ': ' + params.value + '%')
                                #                                 }")
                                #   )
                                telco_customer |> 
                                  count(payment_method) |> 
                                  # top_n(3, n) %>% 
                                  mutate(pct = round(n/sum(n), 4)) |> 
                                  arrange(pct) %>% 
                                  e_charts(payment_method, reorder = TRUE) |> 
                                  e_bar(pct, legend = FALSE) |> 
                                  e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
                                  e_flip_coords() %>% 
                                  e_title("Payment Method") |> 
                                  e_dims(width = 600, height = 200) |> 
                                  e_grid(left = "20%", top = "12.5%", bottom = "25%") %>% 
                                  e_tooltip(
                                    formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                     }")
                                  )
                      ), 
                      div(style="display: flex;", 
                          wellPanel(style="background-color:transparent;text-align:center;margin:1em 0.5em 0.5em 0;padding:1em;height:190px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                    telco_customer %>% 
                                      count(paperless_billing) |>  
                                      mutate(pct = round(n/sum(n)*100, 2)) |> 
                                      e_charts(paperless_billing) %>% 
                                      e_pie(pct) |> 
                                      e_title("Paperless Billing") |> 
                                      e_legend(show = TRUE, type = "plain", orient = "vertical", left = "right") |> 
                                      e_dims(height = 190) |> 
                                      e_tooltip(
                                        formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + params.value + '%')
                                                     }")
                                      )
                          ), 
                          wellPanel(style="background-color:transparent;text-align:center;margin:1em 0 0.5em 0.5em;padding:1em;height:190px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                    telco_customer |> 
                                      count(offer) |>  
                                      mutate(offer = str_remove(offer, "Offer "), 
                                             pct = round(n/sum(n), 4)) |> 
                                      arrange(n) %>% 
                                      e_charts(offer) |> 
                                      e_bar(pct, legend = FALSE) |> 
                                      e_title("Offer") |> 
                                      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
                                      e_flip_coords() %>% 
                                      e_dims(height = 200) |> 
                                      e_grid(left = "15%", top = "12.5%", bottom = "25%", right = "10%") %>% 
                                      e_tooltip(
                                        formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                     }")
                                      )
                          )
                      ), 
                      div(style="display: flex;", 
                          wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0.5em 0 0;padding:1em;height:200px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                    telco_customer %>% 
                                      mutate(tenure_grp = case_when(tenure_in_months < 12 ~ " < 1 year", 
                                                                    tenure_in_months < 24 ~ " < 2 year", 
                                                                    tenure_in_months < 36 ~ " < 3 year", 
                                                                    tenure_in_months < 48 ~ " < 4 year",
                                                                    TRUE ~ "4+ year")) %>% 
                                      count(tenure_grp) %>% 
                                      mutate(pct = round(n/sum(n), 4)) |> 
                                      arrange(n) %>% 
                                      e_charts(tenure_grp) |> 
                                      e_bar(pct, legend = FALSE) |> 
                                      e_title("Tenure") |> 
                                      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
                                      e_flip_coords() %>% 
                                      e_dims(height = 200) |> 
                                      e_grid(left = "25%", top = "12.5%", bottom = "25%", right = "10%") %>% 
                                      e_tooltip(
                                        formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                     }")
                                      )
                          ), 
                          wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0 0 0.5em;padding:1em;height:200px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                    telco_customer %>% 
                                      count(contract) %>% 
                                      mutate(pct = round(n/sum(n), 4)) |> 
                                      arrange(n) %>% 
                                      e_charts(contract) |> 
                                      e_bar(pct, legend = FALSE) |> 
                                      e_title("Contract Type") |> 
                                      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
                                      e_flip_coords() %>% 
                                      e_dims(height = 200) |> 
                                      e_grid(left = "45%", top = "12.5%", bottom = "25%", right = "10%") %>% 
                                      e_tooltip(
                                        formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                     }")
                                      )
                          )
                      )
               ), 
               column(4, 
                      h3("Services Signed", style="font-weight:bold;text-align:center;color:#fff;"),
                      column(12, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:1em;height:285px;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       telco_customer |> 
                                         count(internet_type) |>  
                                         mutate(pct = round(n/sum(n), 4)) |> 
                                         arrange(n) %>% 
                                         e_charts(internet_type) |> 
                                         e_bar(pct, legend = FALSE) |> 
                                         e_title("Internet Service Type") |> 
                                         e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
                                         e_flip_coords() %>% 
                                         e_dims(width = 600, height = 285) |> 
                                         e_grid(left = "15%", top = "12.5%", bottom = "20%", right = "15%") %>% 
                                         e_tooltip(
                                           formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                     }")
                                         )
                             ), 
                             div(style="display:flex;", 
                                 wellPanel(style="background-color:transparent;text-align:center;margin:1em 0.5em 1em 0;padding:1em;height:320px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                           # br(), 
                                           progressBar(id = "pb1", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pb2", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pb3", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pb4", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pb5", value = 0, display_pct = TRUE, striped = TRUE) 
                                 ), 
                                 wellPanel(style="background-color:transparent;text-align:center;margin:1em 0 1em 0.5em;padding:1em;height:320px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                           # br(), 
                                           progressBar(id = "pb6", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pb7", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pb8", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pb9", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pb10", value = 0, display_pct = TRUE, striped = TRUE)
                                           )
                                 )
                             )
                      )
             )
             ), 
    tabPanel(
      h5("Customer Churn Prediction", style="font-weight:bold;margin-top:5px;margin-bottom:5px;"),
             fluidRow(
               column(12, 
                      # h1("Customer Churn Prediction", style="font-weight:bold;text-align:center;color:#000;margin-bottom:0;"), 
                      div(style="display:flex;flex-wrap:nowrap;margin-left:1.5rem;margin-bottom:-30px !important;margin-top:1.5em;", 
                          fileInput("file_data", "Upload File", width = "20%",),
                          div(style="height:30px;margin-top:1.75em;margin-bottom:0;", 
                              actionButton("process", "Process", icon = icon("cogs"))
                          ), 
                          div(style="margin-left:0.5em;", 
                              selectInput("customer", "Select Customer", choices = c("---All Customers---"))
                              )
                      )
               )
             ), 
             fluidRow(
               column(12, 
                      column(2, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       uiOutput("pred_total_cust")
                             )
                      ), 
                      column(2, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       uiOutput("pred_potential_churn")
                             )
                      ), 
                      column(2, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       uiOutput("pred_monthly_charge")
                             )
                      ), 
                      column(2, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       uiOutput("pred_total_charge")
                             )
                      ), 
                      column(2, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       uiOutput("pred_avg_long_dist")
                             )
                      ), 
                      column(2, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       uiOutput("pred_avg_cltv")
                             )
                      ) 
               )
             ), 
             fluidRow(
               column(4, 
                      h3("Customer Demographics", style="font-weight:bold;text-align:center;color:#fff;"), 
                      column(6, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0 0 0.5em 0;padding:1em;height:200px;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       echarts4rOutput("pred_pie_gender")
                             )
                      ),
                      column(6, 
                             div(style="display:flex;", 
                                 wellPanel(style="background-color:transparent;text-align:center;margin:0 0.5em 0.5em 0;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                           uiOutput("pred_sr_citizen")
                                 ), 
                                 wellPanel(style="background-color:transparent;text-align:center;margin:0 0 0.5em 0.5em;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;",
                                           uiOutput("pred_married")
                                 )
                             ), 
                             div(style="display:flex;", 
                                 wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0.5em 0 0;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;",
                                           uiOutput("pred_dependents")
                                 ), 
                                 wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0 0 0.5em;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;",
                                           uiOutput("pred_referred")
                                 )
                             )
                      ),
                column(12, 
                        wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0 0 0;padding:0;border-width:medium;box-shadow: 2px 2px #888888;",
                                  uiOutput("pred_map")
                        )
                )
                      
               ), 
               column(4, 
                      h3("Customer Account Information", style="font-weight:bold;text-align:center;color:#fff;"), 
                      wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:1em;height:200px;border-width:medium;box-shadow: 2px 2px #888888;", 
                                echarts4rOutput("pred_payment")
                      ), 
                      div(style="display: flex;", 
                          wellPanel(style="background-color:transparent;text-align:center;margin:1em 0.5em 0.5em 0;padding:1em;height:190px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                    echarts4rOutput("pred_paperless")
                          ), 
                          wellPanel(style="background-color:transparent;text-align:center;margin:1em 0 0.5em 0.5em;padding:1em;height:190px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                    echarts4rOutput("pred_offer")
                          )
                      ), 
                      div(style="display: flex;", 
                          wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0.5em 0 0;padding:1em;height:200px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                    echarts4rOutput("pred_tenure")
                          ), 
                          wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0 0 0.5em;padding:1em;height:200px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                    echarts4rOutput("pred_contract")
                          )
                      )
               ), 
               column(4, 
                      h3("Services Signed", style="font-weight:bold;text-align:center;color:#fff;"),
                      column(12, 
                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:1em;height:285px;border-width:medium;box-shadow: 2px 2px #888888;", 
                                       echarts4rOutput("pred_internet_type")
                             ), 
                             div(style="display:flex;", 
                                 wellPanel(style="background-color:transparent;text-align:center;margin:1em 0.5em 1em 0;padding:1em;height:320px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                           # br(), 
                                           progressBar(id = "pred_pb1", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pred_pb2", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pred_pb3", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pred_pb4", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pred_pb5", value = 0, display_pct = TRUE, striped = TRUE) 
                                 ), 
                                 wellPanel(style="background-color:transparent;text-align:center;margin:1em 0 1em 0.5em;padding:1em;height:320px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
                                           # br(), 
                                           progressBar(id = "pred_pb6", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pred_pb7", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pred_pb8", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pred_pb9", value = 0, display_pct = TRUE, striped = TRUE), 
                                           progressBar(id = "pred_pb10", value = 0, display_pct = TRUE, striped = TRUE)
                                           )
                                 )
                             )
                      )
               )
             )
    )
)

server <- function(input, output, session){
  output$location <- renderLeaflet({
    tag.map.title <- tags$style(HTML("
    .leaflet-control.map-title { 
                                transform: translate(-50%,20%);
                                position: float !important;
                                left: 80%;
                                margin-top: -50%;
                                text-align: left;
                                padding-left: 10px; 
                                padding-right: 10px; 
                                background: transparent;
                                font-weight: bold;
                                font-size: 20px;
                                }"))
    
    title <- tags$div(
      tag.map.title, HTML("Location")
    )  
    
    telco_customer %>%
      count(city, longitude, latitude) %>%
      leaflet() %>% 
      addTiles() %>% 
      # addMarkers(lng = ~longitude, lat = ~latitude, 
      #            clusterOptions = markerClusterOptions()
      # ) %>%
      addCircles(lng = ~longitude, lat = ~latitude) %>% 
      addControl(title, position = "topleft", className="map-title")
  })
  output$map <- renderUI({
    leafletOutput("location")
  })
  
  mypb_status <- function(value){
    if (value < 33) {
      status <- "danger"
    } else if (value >= 33 & value < 67) {
      status <- "warning"
    } else {
      status <- "success"
    }
    return(status)
  }
  
  # observe({
  #   shinyWidgets::updateProgressBar(session = session, id = "pb1", value = 80, title = "Premium Tech Support")
  #   shinyWidgets::updateProgressBar(session = session, id = "pb2", value = 80, title = "Phone Service")
  #   shinyWidgets::updateProgressBar(session = session, id = "pb3", value = 50, title = "Multiple Lines")
  #   shinyWidgets::updateProgressBar(session = session, id = "pb4", value = 50, title = "Online Security")
  #   shinyWidgets::updateProgressBar(session = session, id = "pb5", value = 50, title = "Online Backup")
  #   shinyWidgets::updateProgressBar(session = session, id = "pb6", value = 50, title = "Device Protection Plan")
  #   shinyWidgets::updateProgressBar(session = session, id = "pb7", value = 50, title = "Streaming TV")
  #   shinyWidgets::updateProgressBar(session = session, id = "pb8", value = 50, title = "Streaming Music")
  #   shinyWidgets::updateProgressBar(session = session, id = "pb9", value = 50, title = "Streaming Movies")
  #   shinyWidgets::updateProgressBar(session = session, id = "pb10", value = 50, title = "Unlimited Data")
  # })
  # 
  observe({
    shinyWidgets::updateProgressBar(session = session, id = "pb1", value = round(sum(telco_customer$premium_tech_support == "Yes")/nrow(telco_customer)*100, 2), title = "Premium Tech Support")
    shinyWidgets::updateProgressBar(session = session, id = "pb2", value = round(sum(telco_customer$phone_service == "Yes")/nrow(telco_customer)*100, 2), title = "Phone Service")
    shinyWidgets::updateProgressBar(session = session, id = "pb3", value = round(sum(telco_customer$multiple_lines == "Yes")/nrow(telco_customer)*100, 2), title = "Multiple Lines")
    shinyWidgets::updateProgressBar(session = session, id = "pb4", value = round(sum(telco_customer$online_security == "Yes")/nrow(telco_customer)*100, 2), title = "Online Security")
    shinyWidgets::updateProgressBar(session = session, id = "pb5", value = round(sum(telco_customer$online_backup == "Yes")/nrow(telco_customer)*100, 2), title = "Online Backup")
    shinyWidgets::updateProgressBar(session = session, id = "pb6", value = round(sum(telco_customer$device_protection_plan == "Yes")/nrow(telco_customer)*100, 2), title = "Device Protection Plan")
    shinyWidgets::updateProgressBar(session = session, id = "pb7", value = round(sum(telco_customer$streaming_tv == "Yes")/nrow(telco_customer)*100, 2), title = "Streaming TV")
    shinyWidgets::updateProgressBar(session = session, id = "pb8", value = round(sum(telco_customer$streaming_music == "Yes")/nrow(telco_customer)*100, 2), title = "Streaming Music")
    shinyWidgets::updateProgressBar(session = session, id = "pb9", value = round(sum(telco_customer$streaming_movies == "Yes")/nrow(telco_customer)*100, 2), title = "Streaming Movies")
    shinyWidgets::updateProgressBar(session = session, id = "pb10", value = round(sum(telco_customer$unlimited_data == "Yes")/nrow(telco_customer)*100, 2), title = "Unlimited Data")
  })

  # to_pred_df <- eventReactive(input$process, read_csv(input$file_data$datapath))

  vep <- vetiver_endpoint("https://aephiday-test.hf.space/predict")

  outpred <- eventReactive(input$process, {
    ext <- tools::file_ext(input$file_data$datapath)
    req(input$file_data)
    validate(need(ext == "csv", "Please upload a csv file"))
    if(is.null(input$file_data)){
      return(NULL)
    } else {
      to_pred_df <- read_csv(input$file_data$datapath)
      vep %>%
        augment(new_data = to_pred_df) %>%
        mutate(.pred_class = factor(if_else(.pred_Yes > 0.5, "Yes", "No"), levels = c("Yes", "No")))
    }
  })
  
  observeEvent(input$process, {
    updateSelectInput(session = session, inputId = "customer", label = "Select Customer", choices = c("---All Customers---", outpred()$customer_id))
  })

  output$pred_total_cust <- renderUI({
    if(input$customer == "---All Customers---"){
      tagList(
        h5("Total Customer", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        scales::number(nrow(outpred()), big.mark = ",") %>%
        h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    } else {
      tagList(
        h5("Customer ID", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        h2(input$customer, style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    }
    
  })
  output$pred_potential_churn <- renderUI({
    if(input$customer == "---All Customers---"){
      tagList(
        h5("Potential Churn Customer", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        paste0(scales::number(sum(outpred()$.pred_class == "Yes"), accuracy = 1), " (", scales::percent(sum(outpred()$.pred_class == "Yes")/nrow(outpred()), accuracy = 0.01), ")") %>% 
          h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    } else {
      tagList(
        h5("Churn Probability", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        scales::percent(outpred() %>% 
                          filter(customer_id == input$customer) %>% 
                          pull(.pred_Yes), accuracy = 0.01) %>% 
          h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    }
  })
  output$pred_monthly_charge <- renderUI({
    if(input$customer == "---All Customers---"){
      tagList(
        h5("Avg Monthly Charges", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        scales::number(mean(outpred()$monthly_charge), accuracy = 0.01, big.mark = ",", prefix = "$") %>%
        h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    } else {
      tagList(
        h5("Avg Monthly Charges", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        scales::number(outpred() %>% 
                       filter(customer_id == input$customer) %>% 
                       pull(monthly_charge), accuracy = 0.01, 
                     big.mark = ",", prefix = "$") %>%
        h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    }
  })
  output$pred_total_charge <- renderUI({
    if(input$customer == "---All Customers---"){
      tagList(
        h5("Total Charges", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        scales::number(sum(outpred()$total_charges), 
                       accuracy = 0.01, big.mark = ",", prefix = "$") %>% 
          h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    } else {
      tagList(
        h5("Total Charges", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        scales::number(outpred() %>% 
                       filter(customer_id == input$customer) %>% 
                       pull(total_charges), accuracy = 0.01, 
                     big.mark = ",", prefix = "$") %>%
        h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    }
  })
  output$pred_avg_long_dist <- renderUI({
    if(input$customer == "---All Customers---"){
      tagList(
        h5("Avg Monthly Long Dist. Chrg", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        scales::number(mean(outpred()$avg_monthly_long_distance_charges), 
                       accuracy = 0.01, big.mark = ",", prefix = "$") %>% 
          h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    } else {
      tagList(
        h5("Avg Monthly Long Dist. Chrg", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        scales::number(outpred() %>% 
                       filter(customer_id == input$customer) %>% 
                       pull(avg_monthly_long_distance_charges), accuracy = 0.01, 
                     big.mark = ",", prefix = "$") %>%
        h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    }
  })
  output$pred_avg_cltv <- renderUI({
    if(input$customer == "---All Customers---"){
      tagList(
        h5("Avg CLTV", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        scales::number(mean(outpred()$cltv), accuracy = 0.01, big.mark = ",") %>% 
        h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    } else {
      tagList(
        h5("CLTV", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        scales::number(outpred() %>% 
                       filter(customer_id == input$customer) %>% 
                       pull(cltv), accuracy = 1, big.mark = ",") %>% 
          h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    }
  })
  
  
  output$pred_pie_gender <- renderEcharts4r({
    if(input$customer == "---All Customers---"){
      outpred() |> 
        count(gender) |>  
        mutate(pct = round(n/sum(n)*100, 2)) |> 
        e_charts(gender) |> 
        e_pie(pct, 
              startAngle = 90) |> 
        e_labels(show = FALSE) %>% 
        e_title("% by Gender") |> 
        e_legend(show = TRUE, type = "plain", orient = "vertical", left = "right") |> 
        e_dims(height = 200) |>
        e_tooltip(
          formatter = htmlwidgets::JS("function(params){
                                                       return(params.name + ': ' + params.value + '%')
                                                       }")
        )
    } else {
      fm <- reactive(outpred() |> 
        filter(customer_id == input$customer) %>% 
        pull(gender))
      
      outpred() |> 
        filter(customer_id == input$customer) %>% 
        count(gender) |>  
        mutate(pct = round(n/sum(n)*100, 2)) |> 
        e_charts(gender) |> 
        e_pie(pct, 
              startAngle = 90) |> 
        e_image_g(top = "10%", 
                  left = "30%", 
                  z = 999, 
                  style = list(image = paste0(fm(), ".png"), 
                               width = 150, 
                               height = 150)
                  ) %>% 
        e_labels(show = FALSE) %>% 
        e_title("Gender") %>% 
        e_dims(height = 200) 
    }
  })
  
  output$pred_sr_citizen <- renderUI({
    if(input$customer == "---All Customers---"){
      tagList(
        h5("Sr. Citizen", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        outpred() %>% 
          mutate(senior_citizen = age > 65) %>% 
          pull(senior_citizen) %>% 
          mean() %>% 
          scales::percent(accuracy = 0.01) %>% 
          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    } else {
      tagList(
        h5("Age", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        outpred() %>% 
          filter(customer_id == input$customer) %>% 
          pull(age) %>% 
          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    }
  })
  
  output$pred_married <- renderUI({
    if(input$customer == "---All Customers---"){
      tagList(
        h5("Married", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        outpred() %>% 
          mutate(married = married == "Yes") %>% 
          pull(married) %>% 
          mean() %>% 
          scales::percent(accuracy = 0.01) %>% 
          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    } else {
      tagList(
        h5("Married", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        outpred() %>% 
          filter(customer_id == input$customer) %>% 
          pull(married) %>% 
          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    }
  })
  
  output$pred_dependents <- renderUI({
    if(input$customer == "---All Customers---"){
      tagList(
        h5("Dependents", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        outpred() %>% 
          mutate(dependents = number_of_dependents > 0) %>% 
          pull(dependents) %>% 
          mean() %>% 
          scales::percent(accuracy = 0.01) %>% 
          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    } else {
      tagList(
        h5("Dependents", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        outpred() %>% 
          filter(customer_id == input$customer) %>% 
          pull(number_of_dependents) %>% 
          mean() %>% 
          scales::number(big.mark = ",") %>% 
          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    }
  })
  
  output$pred_referred <- renderUI({
    if(input$customer == "---All Customers---"){
      tagList(
        h5("Ref Friend", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        outpred() %>% 
          mutate(referred_a_friend = referred_a_friend == "Yes") %>% 
          pull(referred_a_friend) %>% 
          mean() %>% 
          scales::percent(accuracy = 0.01) %>% 
          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    } else {
      tagList(
        h5("Ref Friend", style="font-weight:bold;margin:0;padding:0;"), 
        hr(style="margin:0.5em;padding:0;"), 
        outpred() %>% 
          filter(customer_id == input$customer) %>% 
          pull(referred_a_friend) %>% 
          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
      )
    }
  })
  
  output$pred_location <- renderLeaflet({
    tag.map.title <- tags$style(HTML("
    .leaflet-control.map-title { 
                                transform: translate(-50%,20%);
                                position: float !important;
                                left: 80%;
                                margin-top: -50%;
                                text-align: left;
                                padding-left: 10px; 
                                padding-right: 10px; 
                                background: transparent;
                                font-weight: bold;
                                font-size: 20px;
                                }"))
    
    title <- tags$div(
      tag.map.title, HTML("Location")
    )  
    
    pal <- colorFactor(palette = c("blue", "firebrick"), domain = outpred()$.pred_class)
    
    if(input$customer == "---All Customers---"){
      outpred() %>% 
      # filter(customer_id == input$customer) %>% 
      left_join(locations, join_by(customer_id)) %>% 
      count(city, longitude, latitude) %>%
      leaflet() %>% 
      addTiles() %>% 
      # addMarkers(lng = ~longitude, lat = ~latitude, 
      #            clusterOptions = markerClusterOptions()
      # ) %>%
      addCircles(lng = ~longitude, lat = ~latitude, 
                 color = ~pal(outpred()$.pred_class), 
                 popup = ~htmltools::htmlEscape(paste0(city, ": ", n))) %>% 
      addControl(title, position = "topleft", className="map-title") %>% 
      addLegend(pal = pal, values = outpred()$.pred_class)
    } else {
      cust_data <- outpred() %>% 
        filter(customer_id == input$customer) %>%
        left_join(locations, join_by(customer_id))
      
      cust_data %>% 
        leaflet() %>% 
        # setView(lng = ~longitude, lat = ~latitude, zoom = 17) %>% 
        addTiles() %>% 
        # addMarkers(lng = ~longitude, lat = ~latitude, 
        #            clusterOptions = markerClusterOptions()
        # ) %>%
        addMarkers(lng = ~longitude, lat = ~latitude, 
                   popup = ~htmltools::htmlEscape(city)) %>% 
        addControl(title, position = "topleft", className="map-title")
        
    }
  })
  output$pred_map <- renderUI({
    leafletOutput("pred_location")
  })
  
  output$pred_payment <- renderEcharts4r({
    if(input$customer == "---All Customers---"){
      outpred() |> 
          count(payment_method) |> 
          mutate(pct = round(n/sum(n), 4)) |> 
          arrange(pct) %>% 
          ungroup() %>% 
          e_charts(payment_method, reorder = TRUE) |> 
          e_bar(pct, legend = FALSE) |> 
          e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
          e_flip_coords() %>% 
          e_title("Payment Method") |> 
          e_dims(width = 600, height = 200) |> 
          e_grid(left = "20%", top = "12.5%", bottom = "25%") %>% 
          e_tooltip(
            formatter = htmlwidgets::JS("function(params){
                                                         return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                         }")
          
      )
    } else {
      pm <- reactive(outpred() %>%
        filter(customer_id == input$customer) %>%
        pull(payment_method) %>%
          str_replace("\\s", "-"))
    #     
    #   outpred() %>% 
    #     filter(customer_id == input$customer) %>% 
    #     e_charts() %>% 
    #     e_image_g(top = "10%", 
    #               left = "40%", 
    #               z = -999, 
    #               style = list(image = paste0(pm(), ".png"), 
    #                            width = 150, 
    #                            height = 150)
    #     ) |> 
    #     e_dims(width = 600, height = 200) %>% 
    #     e_title("Payment Method")
      outpred() |> 
        filter(customer_id == input$customer) %>%
        count(payment_method) |> 
        mutate(pct = round(n/sum(n), 4)) |> 
        arrange(pct) %>% 
        ungroup() %>% 
        e_charts(payment_method, reorder = TRUE) |> 
        e_bar(pct, legend = FALSE) |> 
        e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
        e_flip_coords() %>% 
        e_title("Payment Method") |> 
        e_dims(width = 600, height = 200) |> 
        e_image_g(top = "10%",
                  left = "40%",
                  z = 999,
                  style = list(image = paste0(pm(), ".png"),
                               width = 150,
                               height = 150)
        ) |>
        e_grid(left = "20%", top = "12.5%", bottom = "25%") %>%
        e_tooltip(
          formatter = htmlwidgets::JS("function(params){
                                                         return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                         }")
          
        )
    }
  })
  
  output$pred_paperless <- renderEcharts4r({
    if(input$customer == "---All Customers---"){
      outpred() |> 
      count(paperless_billing) |>  
      mutate(pct = round(n/sum(n)*100, 2)) |> 
      e_charts(paperless_billing) %>% 
      e_pie(pct) |> 
      e_labels(show = FALSE) %>% 
      e_title("Paperless Billing") |> 
      e_legend(show = TRUE, type = "plain", orient = "vertical", left = "right") |> 
      e_dims(height = 190) |> 
      e_tooltip(
        formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + params.value + '%')
                                                     }")
      )
    } else {
      pp <- reactive(outpred() %>%
                       filter(customer_id == input$customer) %>%
                       pull(paperless_billing) %>%
                       str_replace("\\s", "-"))

      outpred() %>%
        filter(customer_id == input$customer) %>%
        count(paperless_billing) |>  
        mutate(pct = round(n/sum(n)*100, 2)) |> 
        e_charts(paperless_billing) %>% 
        e_pie(pct) |> 
        e_labels(show = FALSE) %>% 
        e_image_g(top = "15%",
                  left = "40%",
                  z = 999,
                  style = list(image = paste0(pp(), ".png"),
                               width = 120,
                               height = 120)
        ) |>
        e_dims(width = 200, height = 190) %>%
        e_title("Paperless Billing")
    }
  })
  
  output$pred_offer <- renderEcharts4r({
    if(input$customer == "---All Customers---"){
      outpred() |> 
      count(offer) |>  
      mutate(offer = str_remove(offer, "Offer "), 
             pct = round(n/sum(n), 4)) |> 
      arrange(n) %>% 
      e_charts(offer) |> 
      e_bar(pct, legend = FALSE) |> 
      e_title("Offer") |> 
      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
      e_flip_coords() %>% 
      e_dims(height = 200) |> 
      e_grid(left = "15%", top = "12.5%", bottom = "25%", right = "10%") %>% 
      e_tooltip(
        formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                     }")
      )
    } else {
      po <- reactive(outpred() %>%
                       filter(customer_id == input$customer) %>%
                       mutate(offer = str_remove(offer, "Offer ")) %>%
                       pull(offer) %>%
                       str_replace("\\s", "-"))

      outpred() %>%
        filter(customer_id == input$customer) %>%
        mutate(offer = str_remove(offer, "Offer ")) %>%
        count(offer) |>  
        mutate(offer = str_remove(offer, "Offer "), 
               pct = round(n/sum(n), 4)) |> 
        arrange(n) %>% 
        e_charts(offer) |> 
        e_bar(pct, legend = FALSE) |> 
        e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
        e_flip_coords() %>% 
        e_image_g(top = "15%",
                  left = "40%",
                  z = 999,
                  style = list(image = paste0(po(), ".png"),
                               width = 120,
                               height = 120)
        ) |>
        e_grid(left = "15%", top = "12.5%", bottom = "25%", right = "10%") %>% 
        e_dims(width = 200, height = 200) %>%
        e_title("Offer")
    }
  })
  
  output$pred_tenure <- renderEcharts4r({
    if(input$customer == "---All Customers---"){
      outpred() |> 
      mutate(tenure_grp = case_when(tenure_in_months < 12 ~ " < 1 year", 
                                    tenure_in_months < 24 ~ " < 2 year", 
                                    tenure_in_months < 36 ~ " < 3 year", 
                                    tenure_in_months < 48 ~ " < 4 year",
                                    TRUE ~ "4+ year")) %>% 
      count(tenure_grp) %>% 
      mutate(pct = round(n/sum(n), 4)) |> 
      arrange(n) %>% 
      e_charts(tenure_grp) |> 
      e_bar(pct, legend = FALSE) |> 
      e_title("Tenure") |> 
      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
      e_flip_coords() %>% 
      e_dims(height = 200) |> 
      e_grid(left = "25%", top = "12.5%", bottom = "25%", right = "10%") %>% 
      e_tooltip(
        formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                     }")
      )
    } else {
      outpred() |> 
        filter(customer_id == input$customer) %>%
        mutate(tenure_grp = case_when(tenure_in_months < 12 ~ " < 1 year", 
                                      tenure_in_months < 24 ~ " < 2 year", 
                                      tenure_in_months < 36 ~ " < 3 year", 
                                      tenure_in_months < 48 ~ " < 4 year",
                                      TRUE ~ "4+ year")) %>% 
        count(tenure_grp) %>% 
        mutate(pct = round(n/sum(n), 4)) |> 
        arrange(n) %>% 
        e_charts(tenure_grp) |> 
        e_bar(pct, legend = FALSE) |> 
        e_title("Tenure") |> 
        e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
        e_flip_coords() %>% 
        e_dims(height = 200) |> 
        e_grid(left = "25%", top = "12.5%", bottom = "25%", right = "10%") %>% 
        e_tooltip(
          formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                     }")
        )
    }
  })
  
  output$pred_contract <- renderEcharts4r({
    if(input$customer == "---All Customers---"){
      outpred() |> 
      count(contract) %>% 
      mutate(pct = round(n/sum(n), 4)) |> 
      arrange(n) %>% 
      e_charts(contract) |> 
      e_bar(pct, legend = FALSE) |> 
      e_title("Contract Type") |> 
      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
      e_flip_coords() %>% 
      e_dims(height = 200) |> 
      e_grid(left = "45%", top = "12.5%", bottom = "25%", right = "10%") %>% 
      e_tooltip(
        formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                     }")
      )
    } else {
      outpred() |> 
        filter(customer_id == input$customer) %>%
        count(contract) %>% 
        mutate(pct = round(n/sum(n), 4)) |> 
        arrange(n) %>% 
        e_charts(contract) |> 
        e_bar(pct, legend = FALSE) |> 
        e_title("Contract Type") |> 
        e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
        e_flip_coords() %>% 
        e_dims(height = 200) |> 
        e_grid(left = "45%", top = "12.5%", bottom = "25%", right = "10%") %>% 
        e_tooltip(
          formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                     }")
        )
    }
  })
  
  output$pred_internet_type <- renderEcharts4r({
    if(input$customer == "---All Customers---"){
      outpred() |> 
      count(internet_type) |>  
      mutate(pct = round(n/sum(n), 4)) |> 
      arrange(n) %>% 
      e_charts(internet_type) |> 
      e_bar(pct, legend = FALSE) |> 
      e_title("Internet Service Type") |> 
      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
      e_flip_coords() %>% 
      e_dims(width = 600, height = 285) |> 
      e_grid(left = "15%", top = "12.5%", bottom = "20%", right = "15%") %>% 
      e_tooltip(
        formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                     }")
      )
    } else {
      outpred() |> 
        filter(customer_id == input$customer) %>%
        count(internet_type) |>  
        mutate(pct = round(n/sum(n), 4)) |> 
        arrange(n) %>% 
        e_charts(internet_type) |> 
        e_bar(pct, legend = FALSE) |> 
        e_title("Internet Service Type") |> 
        e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
        e_flip_coords() %>% 
        e_dims(width = 600, height = 285) |> 
        e_grid(left = "15%", top = "12.5%", bottom = "20%", right = "15%") %>% 
        e_tooltip(
          formatter = htmlwidgets::JS("function(params){
                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
                                                     }")
        )
    }
  })

  observe({
    if(input$customer == "---All Customers---"){
      shinyWidgets::updateProgressBar(session = session, id = "pred_pb1", value = round(sum(outpred()$premium_tech_support == "Yes")/nrow(outpred())*100, 2), title = "Premium Tech Support")
    shinyWidgets::updateProgressBar(session = session, id = "pred_pb2", value = round(sum(outpred()$phone_service == "Yes")/nrow(outpred())*100, 2), title = "Phone Service")
    shinyWidgets::updateProgressBar(session = session, id = "pred_pb3", value = round(sum(outpred()$multiple_lines == "Yes")/nrow(outpred())*100, 2), title = "Multiple Lines")
    shinyWidgets::updateProgressBar(session = session, id = "pred_pb4", value = round(sum(outpred()$online_security == "Yes")/nrow(outpred())*100, 2), title = "Online Security")
    shinyWidgets::updateProgressBar(session = session, id = "pred_pb5", value = round(sum(outpred()$online_backup == "Yes")/nrow(outpred())*100, 2), title = "Online Backup")
    shinyWidgets::updateProgressBar(session = session, id = "pred_pb6", value = round(sum(outpred()$device_protection_plan == "Yes")/nrow(outpred())*100, 2), title = "Device Protection Plan")
    shinyWidgets::updateProgressBar(session = session, id = "pred_pb7", value = round(sum(outpred()$streaming_tv == "Yes")/nrow(outpred())*100, 2), title = "Streaming TV")
    shinyWidgets::updateProgressBar(session = session, id = "pred_pb8", value = round(sum(outpred()$streaming_music == "Yes")/nrow(outpred())*100, 2), title = "Streaming Music")
    shinyWidgets::updateProgressBar(session = session, id = "pred_pb9", value = round(sum(outpred()$streaming_movies == "Yes")/nrow(outpred())*100, 2), title = "Streaming Movies")
    shinyWidgets::updateProgressBar(session = session, id = "pred_pb10", value = round(sum(outpred()$unlimited_data == "Yes")/nrow(outpred())*100, 2), title = "Unlimited Data")
    } else {
      cust_data <- outpred() %>% 
        filter(customer_id == input$customer)
      
      shinyWidgets::updateProgressBar(session = session, id = "pred_pb1", value = (cust_data$premium_tech_support == "Yes")*100, title = "Premium Tech Support")
      shinyWidgets::updateProgressBar(session = session, id = "pred_pb2", value = (cust_data$phone_service == "Yes")*100, title = "Phone Service")
      shinyWidgets::updateProgressBar(session = session, id = "pred_pb3", value = (cust_data$multiple_lines == "Yes")*100, title = "Multiple Lines")
      shinyWidgets::updateProgressBar(session = session, id = "pred_pb4", value = (cust_data$online_security == "Yes")*100, title = "Online Security")
      shinyWidgets::updateProgressBar(session = session, id = "pred_pb5", value = (cust_data$online_backup == "Yes")*100, title = "Online Backup")
      shinyWidgets::updateProgressBar(session = session, id = "pred_pb6", value = (cust_data$device_protection_plan == "Yes")*100, title = "Device Protection Plan")
      shinyWidgets::updateProgressBar(session = session, id = "pred_pb7", value = (cust_data$streaming_tv == "Yes")*100, title = "Streaming TV")
      shinyWidgets::updateProgressBar(session = session, id = "pred_pb8", value = (cust_data$streaming_music == "Yes")*100, title = "Streaming Music")
      shinyWidgets::updateProgressBar(session = session, id = "pred_pb9", value = (cust_data$streaming_movies == "Yes")*100, title = "Streaming Movies")
      shinyWidgets::updateProgressBar(session = session, id = "pred_pb10", value = (cust_data$unlimited_data == "Yes")*100, title = "Unlimited Data")
    }
  })
  }

shinyApp(ui, server)