<?php

//dd(session('ashwamedh_company_code'));

if(session('ashwamedh_company_code') == null){
    header("Location: " . route('login'));
    exit();
}

Config::set('database.default', 'tenant');

if (!function_exists('xLstDayOfMth')) {
    function xLstDayOfMth($pyymm2){
      $pyymm2 =   date('Y-m-d',mktime(0,0,0,(int)substr($pyymm2,-2)+1,0,date((int)substr($pyymm2,0,4))));
      return $pyymm2;
    }
}

if (!function_exists('Printyymm')) {
    function Printyymm($pyymm2){
      $pyymm2 =   date('M Y',mktime(0,0,0,(int)substr($pyymm2,-2)+1,0,date((int)substr($pyymm2,0,4))));
      return $pyymm2;
    }
}

$password_reset = Auth::user()?->password_reset;

// Check if password needs to be reset
if ($password_reset == "Y") {
    // Instead of JavaScript redirect, use Laravel's redirect
    header("Location: " . route('change_password'));
    exit();
}

//dd(session('ashwamedh_profile'));
 $qry = DB::select("SELECT node FROM accessright WHERE node LIKE '%Dashboard%' and profile = '" . Auth::user()?->profile . "'");
//echo "SELECT * FROM accessright WHERE node LIKE '%Dashboard%' and profile = '" . Auth::user()->profile . "'";die();
 $count1 = count($qry);
 $chkempl = DB::select("SELECT empl_cd FROM `employee` where  empl_cd ='" . Auth::user()?->userid ."'");

 $company = DB::table('g_locpar')->where('locn_cd', Auth::user()?->proloc)->first();
 $comp_logo = $company->comp_logo ?? '';
  $currdt =  xLstDayOfMth($company->curr_ym ?? date('Ym'));

 $actempl = DB::select("select Count(empl_cd) as cnt from employee where (l_date = '0000-00-00' OR l_date >  '$currdt') and j_date < '$currdt'  and locn_cd = '" . Auth::user()?->proloc ."'");
 $actemplcnt = $actempl[0]->cnt ?? 0; // null if no records

  $pendsett = DB::select("select Count(empl_cd) as cnt from settlehdr where  status <> 'SETTELED' and locn_cd = '" .  Auth::user()?->proloc  ."'");
 $settlecnt = $pendsett[0]->cnt ?? 0; // null if no records


 $leftempl = DB::select("select Count(empl_cd) as cnt from employee where  MONTH(l_Date) = MONTH('$currdt') AND YEAR(l_Date) = YEAR('$currdt') and locn_cd = '" .  Auth::user()?->proloc  ."'");
 $leftemplcnt = $leftempl[0]->cnt ?? 0; // null if no records

 $joinempl = DB::select("select Count(empl_cd) as cnt from employee where  MONTH(j_Date) = MONTH('$currdt') AND YEAR(j_Date) = YEAR('$currdt') and locn_cd = '" .  Auth::user()?->proloc  ."'");
 $joinemplcnt = $joinempl[0]->cnt ?? 0; // null if no records

 $attrition = 0;
 if ($leftemplcnt > 0){
    $attrition  = round(($leftemplcnt / ($leftemplcnt + $actemplcnt)) * 100,2);
 }



$lastmthrow = DB::select("SELECT DATE_FORMAT( '$currdt' - INTERVAL 1 MONTH, '%Y%m') AS last_month,
       DATE_FORMAT( '$currdt' - INTERVAL 2 MONTH, '%Y%m') AS two_months_ago,
       DATE_FORMAT( '$currdt' - INTERVAL 3 MONTH, '%Y%m') AS three_months_ago");



$labels[3] = date('M',mktime(0,0,0,substr($company->curr_ym ?? date('Ym'),-2)+1,0,date(substr($company->curr_ym ?? date('Ym'),0,4))));
$labels[2] = date('M',mktime(0,0,0,substr($lastmthrow[0]->last_month ?? date('Ym'),-2)+1,0,date(substr($lastmthrow[0]->last_month ?? date('Ym'),0,4))));
$labels[1] = date('M',mktime(0,0,0,substr($lastmthrow[0]->two_months_ago ?? date('Ym'),-2)+1,0,date(substr($lastmthrow[0]->two_months_ago ?? date('Ym'),0,4))));
$labels[0] = date('M',mktime(0,0,0,substr($lastmthrow[0]->three_months_ago ?? date('Ym'),-2)+1,0,date(substr($lastmthrow[0]->three_months_ago ?? date('Ym'),0,4))));


 $currdt1 =  xLstDayOfMth($lastmthrow[0]->last_month ?? date('Ym'));
 $actempl1 = DB::select("select Count(empl_cd) as cnt from employee where (l_date = '0000-00-00' OR l_date >  '$currdt1') and j_date < '$currdt1' and locn_cd = '" . Auth::user()?->proloc ."'");
 $actemplcnt1 = $actempl1[0]->cnt ?? 0; // null if no records

  $currdt2 =  xLstDayOfMth($lastmthrow[0]->two_months_ago ?? date('Ym'));
 $actempl2 = DB::select("select Count(empl_cd) as cnt from employee where (l_date = '0000-00-00' OR l_date >  '$currdt2') and j_date < '$currdt2' and locn_cd = '" . Auth::user()?->proloc ."'");
 $actemplcnt2 = $actempl2[0]->cnt ?? 0; // null if no records

  $currdt3 =  xLstDayOfMth($lastmthrow[0]->three_months_ago ?? date('Ym'));
 $actempl3 = DB::select("select Count(empl_cd) as cnt from employee where (l_date = '0000-00-00' OR l_date >  '$currdt3') and j_date < '$currdt3' and locn_cd = '" . Auth::user()?->proloc ."'");
 $actemplcnt3 = $actempl3[0]->cnt ?? 0; // null if no records

 $actemplarr[0] =  $actemplcnt3;
$actemplarr[1] =  $actemplcnt2;
$actemplarr[2] =  $actemplcnt1;
$actemplarr[3] =  $actemplcnt;

 $joinempl1 = DB::select("select Count(empl_cd) as cnt from employee where  MONTH(j_Date) = MONTH('$currdt1') AND YEAR(j_Date) = YEAR('$currdt1') and locn_cd = '" .  Auth::user()?->proloc  ."'");
 $joinemplcnt1 = $joinempl1[0]->cnt ?? 0; // null if no records

 $joinempl2 = DB::select("select Count(empl_cd) as cnt from employee where  MONTH(j_Date) = MONTH('$currdt2') AND YEAR(j_Date) = YEAR('$currdt2') and locn_cd = '" .  Auth::user()?->proloc  ."'");
 $joinemplcnt2 = $joinempl2[0]->cnt ?? 0; // null if no records

  $joinempl3 = DB::select("select Count(empl_cd) as cnt from employee where  MONTH(j_Date) = MONTH('$currdt3') AND YEAR(j_Date) = YEAR('$currdt3') and locn_cd = '" .  Auth::user()?->proloc  ."'");
 $joinemplcnt3 = $joinempl3[0]->cnt ?? 0; // null if no records


$joinemplarr[0] =  $joinemplcnt3;
$joinemplarr[1] =   $joinemplcnt2;
$joinemplarr[2] =  $joinemplcnt1;
$joinemplarr[3] =  $joinemplcnt;



 $leftempl1 = DB::select("select Count(empl_cd) as cnt from employee where  MONTH(l_Date) = MONTH('$currdt1') AND YEAR(l_Date) = YEAR('$currdt1') and locn_cd = '" .  Auth::user()?->proloc  ."'");
 $leftemplcnt1 = $leftempl1[0]->cnt ?? 0; // null if no records

  $leftempl2 = DB::select("select Count(empl_cd) as cnt from employee where  MONTH(l_Date) = MONTH('$currdt2') AND YEAR(l_Date) = YEAR('$currdt2') and locn_cd = '" .  Auth::user()?->proloc  ."'");
 $leftemplcnt2 = $leftempl2[0]->cnt ?? 0; // null if no records

  $leftempl3 = DB::select("select Count(empl_cd) as cnt from employee where  MONTH(l_Date) = MONTH('$currdt3') AND YEAR(l_Date) = YEAR('$currdt3') and locn_cd = '" .  Auth::user()?->proloc  ."'");
 $leftemplcnt3 = $leftempl3[0]->cnt ?? 0; // null if no records

$leftemplarr[0] =  $leftemplcnt3;
$leftemplarr[1] =   $leftemplcnt2;
$leftemplarr[2] =  $leftemplcnt1;
$leftemplarr[3] =  $leftemplcnt;



 $attrition1 = 0;
 if ($leftemplcnt1 > 0){
    $attrition1  = round(($leftemplcnt1 / ($leftemplcnt1 + $actemplcnt1)) * 100,2);
 }

 $attrition2 = 0;
 if ($leftemplcnt2 > 0){
    $attrition2  = round(($leftemplcnt2 / ($leftemplcnt2 + $actemplcnt2)) * 100,2);
 }

  $attrition3 = 0;
 if ($leftemplcnt3 > 0){
    $attrition3  = round(($leftemplcnt3 / ($leftemplcnt3 + $actemplcnt3)) * 100,2);
 }


$attremplarr[0] =  $attrition3;
$attremplarr[1] =   $attrition2;
$attremplarr[2] =  $attrition1;
$attremplarr[3] =  $attrition;

$labels[3] = date('M',mktime(0,0,0,substr($company->curr_ym ?? date('Ym'),-2)+1,0,date(substr($company->curr_ym ?? date('Ym'),0,4)))) . " : Attrition " . $attrition;
$labels[2] = date('M',mktime(0,0,0,substr($lastmthrow[0]->last_month ?? date('Ym'),-2)+1,0,date(substr($lastmthrow[0]->last_month ?? date('Ym'),0,4)))) . " : Attrition " . $attrition1;
$labels[1] = date('M',mktime(0,0,0,substr($lastmthrow[0]->two_months_ago ?? date('Ym'),-2)+1,0,date(substr($lastmthrow[0]->two_months_ago ?? date('Ym'),0,4)))) . " : Attrition " . $attrition2;
$labels[0] = date('M',mktime(0,0,0,substr($lastmthrow[0]->three_months_ago ?? date('Ym'),-2)+1,0,date(substr($lastmthrow[0]->three_months_ago ?? date('Ym'),0,4))))  . " : Attrition " . $attrition3;



//Workforce Composition Gender Ration

$lastmthrow = DB::select("SELECT DATE_FORMAT(LAST_DAY(CURDATE()), '%Y-%m-%d') AS current_month,DATE_FORMAT(LAST_DAY(DATE_SUB(CURDATE(), INTERVAL 1 MONTH)), '%Y-%m-%d') AS last_month, DATE_FORMAT(LAST_DAY(DATE_SUB(CURDATE(), INTERVAL 2 MONTH)), '%Y-%m-%d') AS two_months_ago");


$gempl1 = DB::select("select sum(if(gender = 'M',1,0)) as male ,sum(if(gender = 'M',0,1)) as Female from employee where  j_date <= '" . $lastmthrow[0]->current_month . "' and (l_date = '0000-00-00' OR l_date > '" . $lastmthrow[0]->current_month . "') and locn_cd = '" .  Auth::user()?->proloc  ."'");
$gempl2 = DB::select("select sum(if(gender = 'M',1,0)) as male ,sum(if(gender = 'M',0,1)) as Female from employee where  j_date <= '" . $lastmthrow[0]->last_month . "' and (l_date = '0000-00-00' OR l_date > '" . $lastmthrow[0]->last_month . "') and locn_cd = '" .  Auth::user()?->proloc  ."'");
$gempl3 = DB::select("select sum(if(gender = 'M',1,0)) as male ,sum(if(gender = 'M',0,1)) as Female from employee where  j_date <= '" . $lastmthrow[0]->two_months_ago . "' and (l_date = '0000-00-00' OR l_date > '" . $lastmthrow[0]->two_months_ago . "') and locn_cd = '" .  Auth::user()?->proloc  ."'");

$female[0] = $gempl1[0]->Female ?? 0; // null if no records
$female[1] = $gempl2[0]->Female ?? 0; // null if no records
$female[2] = $gempl3[0]->Female ?? 0; // null if no records

$male[0] = $gempl1[0]->male ?? 0; // null if no records
$male[1] = $gempl2[0]->male ?? 0; // null if no records
$male[2] = $gempl3[0]->male ?? 0; // null if no records

$wlabels[0] = substr($lastmthrow[0]->current_month,1,7);
$wlabels[1] = substr($lastmthrow[0]->last_month,1,7);
$wlabels[3] = substr($lastmthrow[0]->two_months_ago,1,7);


//echo "SELECT empl_cd FROM `employee` where  empl_cd ='" . Auth::user()?->userid ."'";die();
 $count2 = count($chkempl);
if ($count1 > 0 && $count2 > 0){

?>

<x-app-layout>

@include('set_tenant_db');

<style type="text/css">
/* New Dashboard Styles */
:root {
  --primary-color: #6B73FF;
  --secondary-color: #9B59B6;
  --success-color: #2ECC71;
  --warning-color: #F39C12;
  --danger-color: #E74C3C;
  --info-color: #1ABC9C;
  --light-bg: #F8F9FA;
  --card-bg: #FFFFFF;
  --text-muted: #6c757d;
  --border-color: #dee2e6;
  --todo-color: #6B73FF;
  --progress-color: #F39C12;
  --review-color: #9B59B6;
  --done-color: #2ECC71;
  
  /* Soft color palette for summary cards */
  --soft-blue: #E3F2FD;
  --soft-purple: #F3E5F5;
  --soft-green: #E8F5E9;
  --soft-orange: #FFF3E0;
  --soft-red: #FFEBEE;
  --soft-teal: #E0F2F1;
  --soft-indigo: #E8EAF6;
}

body {
  background-color: var(--light-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333;
}

/* --- NEW UI: Main Container --- */
.dashboard-kanban {
  padding: 2rem;
}

/* --- NEW UI: Summary Bar with Beer Bottle Shape --- */
.summary-bar {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.summary-card {
  background: linear-gradient(145deg, #FFFFFF, #F5F7FA);
  border-radius: 25px 25px 45px 45px;
  box-shadow: 
    0 8px 16px rgba(0,0,0,0.08),
    0 3px 6px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: 140px;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.8);
}

/* Combined card special styling */
.summary-card.combined {
  grid-column: span 1;
  flex-direction: row;
  padding: 0 1.5rem;
  justify-content: space-between;
  height: 140px;
}

.summary-card.combined::before {
  width: 80%;
  height: 30px;
}

.summary-card.combined::after {
  width: 50%;
  height: 15px;
}

.summary-card.combined .combined-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 3;
}

.summary-card.combined .combined-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0 0.5rem;
}

.summary-card.combined .combined-item:not(:last-child) {
  border-right: 2px dashed rgba(0,0,0,0.1);
}

.summary-card.combined i {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.summary-card.combined .info h4 {
  font-size: 2rem;
}

.summary-card.combined .info p {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Regular single cards */
.summary-card.single {
  /* Keep original single card styles */
}

/* Beer bottle neck effect */
.summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 30px;
  background: linear-gradient(145deg, #FFFFFF, #F5F7FA);
  border-radius: 15px 15px 0 0;
  z-index: 1;
}

/* Beer bottle cap effect */
.summary-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 15px;
  background: linear-gradient(145deg, #F5F7FA, #E0E0E0);
  border-radius: 10px 10px 0 0;
  z-index: 2;
}

.summary-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 
    0 15px 30px rgba(0,0,0,0.15),
    0 5px 15px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.summary-card i {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  opacity: 0.85;
  transition: all 0.3s ease;
  position: relative;
  z-index: 3;
}

.summary-card:hover i {
  transform: scale(1.1);
  opacity: 1;
}

.summary-card .info {
  text-align: center;
  position: relative;
  z-index: 3;
}

.summary-card .info h4 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: #2C3E50;
  transition: all 0.3s ease;
}

.summary-card .info p {
  margin: 0.25rem 0 0;
  color: #5A6C7D;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.charts-summary{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:15px;
}

.chart-card{
    width:100%;
}

/* Soft color variants for summary cards */
.summary-card.primary {
  background: linear-gradient(145deg, var(--soft-blue), #BBDEFB);
  border-color: #90CAF9;
}
.summary-card.primary i { color: #1976D2; }
.summary-card.primary .info h4 { color: #0D47A1; }
.summary-card.primary .info p { color: #1565C0; }

.summary-card.secondary {
  background: linear-gradient(145deg, var(--soft-purple), #E1BEE7);
  border-color: #CE93D8;
}
.summary-card.secondary i { color: #7B1FA2; }
.summary-card.secondary .info h4 { color: #4A148C; }
.summary-card.secondary .info p { color: #6A1B9A; }

.summary-card.success {
  background: linear-gradient(145deg, var(--soft-green), #C8E6C9);
  border-color: #A5D6A7;
}
.summary-card.success i { color: #388E3C; }
.summary-card.success .info h4 { color: #1B5E20; }
.summary-card.success .info p { color: #2E7D32; }

.summary-card.warning {
  background: linear-gradient(145deg, var(--soft-orange), #FFE0B2);
  border-color: #FFCC80;
}
.summary-card.warning i { color: #F57C00; }
.summary-card.warning .info h4 { color: #E65100; }
.summary-card.warning .info p { color: #EF6C00; }

.summary-card.danger { 
  background: linear-gradient(145deg, var(--soft-red), #FFCDD2);
  border-color: #EF9A9A;
}
.summary-card.danger i { color: #C62828; }
.summary-card.danger .info h4 { color: #B71C1C; }
.summary-card.danger .info p { color: #D32F2F; }

.summary-card.info { 
  background: linear-gradient(145deg, var(--soft-teal), #B2DFDB);
  border-color: #80CBC4;
}
.summary-card.info i { color: #00796B; }
.summary-card.info .info h4 { color: #004D40; }
.summary-card.info .info p { color: #00695C; }

/* Combined card gradient */
.summary-card.combined {
  background: linear-gradient(145deg, var(--soft-blue), var(--soft-purple));
  border-color: #90CAF9;
}

/* --- NEW UI: Charts Section
.charts-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.chart-card {
  background-color: var(--card-bg);
  padding: 1.2rem;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05);
}
--- */

.charts-summary{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:15px;
}

.chart-card{
    width:100%;
}




.chart-card:hover {
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}
.chart-card h5 {
  margin-bottom: 1rem;
  font-weight: 600;
  color: #2C3E50;
  font-size: 1.1rem;
}
.chart-wrapper {
  position: relative;
  height: 180px;
}

/* --- NEW UI: Kanban Board --- */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.kanban-column {
  background-color: var(--card-bg);
  border-radius: 20px;
  padding: 1.25rem;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
}
.kanban-column h6 {
  font-weight: 600;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kanban-column .count {
  background-color: var(--light-bg);
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 12px;
}
.column-todo h6 { color: var(--todo-color); }
.column-progress h6 { color: var(--progress-color); }
.column-review h6 { color: var(--review-color); }
.column-done h6 { color: var(--done-color); }

.kanban-cards-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background-color 0.2s;
  padding: 0.25rem;
  border-radius: 8px;
}
.kanban-column.drag-over .kanban-cards-container {
  background-color: #e9ecef;
}

.kanban-card {
  background-color: var(--light-bg);
  padding: 1rem;
  border-radius: 15px;
  cursor: grab;
  transition: all 0.2s ease-in-out;
  border-left: 4px solid transparent;
}
.kanban-card:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.kanban-card.dragging {
  opacity: 0.5;
  cursor: grabbing;
  transform: rotate(5deg);
}
.kanban-card .card-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.kanban-card .card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.kanban-card .card-meta .badge {
  font-size: 0.7rem;
}
.kanban-card.priority-high { border-left-color: var(--danger-color); }
.kanban-card.priority-medium { border-left-color: var(--warning-color); }
.kanban-card.priority-low { border-left-color: var(--success-color); }

/* --- Responsive Design --- */
@media (max-width: 1200px) {
  .kanban-board { grid-template-columns: repeat(2, 1fr); }
  .summary-bar { 
    grid-template-columns: repeat(3, 1fr);
  }
  .summary-card.combined {
    grid-column: span 1;
  }
}
@media (max-width: 768px) {
  .charts-summary, .kanban-board { grid-template-columns: 1fr; }
  .dashboard-kanban { padding: 1rem; }
  .summary-bar { 
    grid-template-columns: repeat(2, 1fr);
  }
  .summary-card { 
    height: 120px;
  }
  .summary-card.combined {
    flex-direction: column;
    padding: 1rem;
  }
  .summary-card.combined .combined-content {
    flex-direction: column;
  }
  .summary-card.combined .combined-item:not(:last-child) {
    border-right: none;
    border-bottom: 2px dashed rgba(0,0,0,0.1);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }
  .summary-card i { font-size: 1.8rem; }
  .summary-card .info h4 { font-size: 1.5rem; }
  .summary-card.combined i { font-size: 2rem; }
  .summary-card.combined .info h4 { font-size: 1.8rem; }
  .chart-wrapper { height: 150px; }
}
@media (max-width: 480px) {
  .summary-bar { grid-template-columns: 1fr; }
  .summary-card { height: 110px; }
  .summary-card.combined {
    grid-column: span 1;
  }
}

/* Keep your existing styles below */
.ess-section .card-title,
.quick-links-section .card-title {
    background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
    color: #fff;
    padding: 10px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

@keyframes shine {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Card Backgrounds for ALL dashboard sections */
.ess-section,
.quick-links-section {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(107, 115, 255, 0.08);
    transition: all 0.3s ease;
}

.ess-section:hover,
.quick-links-section:hover {
    box-shadow: 0 6px 18px rgba(107, 115, 255, 0.12);
    transform: translateY(-2px);
}

.my-action1-column, .my-action2-column {
    flex: 1;
    min-width: 300px;
}

.my-action1-column {
        margin-top: 3%;
    }

/* Ensure Links Stay in One Line */
.my-action2-column a {
    color: #333;
    padding: 8px 12px;
    border-left: 3px solid #6B73FF;
    background: #f5f5f5;
    margin-bottom: 5px;
    border-radius: 0 4px 4px 0;
    transition: all 0.3s ease;
}

.my-action2-column a:hover {
    background: #6B73FF;
    color: white;
    padding-left: 16px;
    text-decoration: none;
}

.my-action2-column ul {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

/* Card Title Styling */
.card-title {
    padding: 10px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

/* Button Icon Adjustments */
.btn.btn-social-icon i {
    font-size: 24px;
}

/* Badge Colors */
.badge-blue {
    background-color: #6B73FF;
}

.badge-green {
    background-color: #2ECC71;
}

.badge-red {
    background-color: #E74C3C;
}

.badge-red2 {
    background-color: #C0392B;
}

.badge-green2 {
    background-color: #27AE60;
}

/* Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    text-align: left;
}

.grid-items {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid-items p {
    color: #555;
    font-weight: 500;
}

.grid-items button {
    background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
    border: 1px solid #e0e0e0;
    color: white;
    transition: all 0.3s ease;
}

.grid-items button:hover {
    background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
    color: #6B73FF;
    border-color: #6B73FF;
    transform: scale(1.05);
}

/* Close Button */
.close {
    font-size: 35px;
    margin-left: 96%;
    color: white;
    text-decoration: none;
}

/* Loader Styles */
/* .hidden {
    display: none;
} 

.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pixel-loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #6B73FF;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    color: #6B73FF;
    background-color: #6B73FF;
} */

/* Ensures Equal Width for Action Columns */
.my-action1-column, .my-action2-column {
    flex: 1;
    min-width: 48%;
} 

.ess-section, .quick-links-section {
    height: auto;
    min-height: 300px;
}

/* Mobile View Adjustments */
@media (max-width: 768px) {
    .ess-section,
    .quick-links-section {
        box-shadow: 0 3px 8px rgba(107, 115, 255, 0.08);
    }
    .quick-links-section::-webkit-scrollbar {
        width: 6px;
    }

    .quick-links-section::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }

    .quick-links-section::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    .ess-section, .quick-links-section {
        top: -70px;
        margin-bottom: 20px;
        padding: 10px;
        position: relative;
    }

    .quick-links-section .card-title {
        font-size: 18px;
        padding: 8px;
        text-align: center;
    }

    .my-action2-column a {
        font-size: 13px !important;
        padding: 6px 10px;
    }

    .my-action2-column ul {
        padding: 5px;
        margin: 0;
        list-style: none;
    }

    .my-action2-column li {
        margin-bottom: 10px;
    }

    .btn.btn-social-icon {
        width: 50px !important;
        height: 50px !important;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .btn.btn-social-icon i {
        font-size: 24px !important;
    }

    p {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        line-height: 1.3rem;
        text-align: center;
    }

    .stretch-card > .card {
        width: 100%;
        min-width: 90%;
    }
}

/* Tablet View Adjustments */
@media (max-width: 1024px) {
    .grid-items button {
        height: 55px;
        width: 55px;
    }
    
    .grid-items p {
        font-size: 13px;
    }

    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>

  <!-- Add Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="{{asset('bootstrap/vendors/mdi/css/materialdesignicons.min.css')}}">
  <link rel="stylesheet" href="{{asset('bootstrap/vendors/fullcalendar/fullcalendar.min.css')}}">
  <link rel="stylesheet" href="{{asset('bootstrap/vendors/owl-carousel-2/owl.carousel.min.css')}}">
  <link rel="stylesheet" href="{{asset('bootstrap/vendors/owl-carousel-2/owl.theme.default.min.css')}}">
  <link rel="stylesheet" href="{{asset('bootstrap/vendors/font-awesome/css/font-awesome.min.css')}}" />
  
  <!-- Add Chart.js for the new dashboard -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- partial -->

    <div class="container-fluid page-body-wrapper">
      <div class="main-panel">
             <div class="loader-container" id="loaderContainer">
                 <div class="pixel-loader"></div>
             </div>
        <div class="content-wrapper">
          <div class="container">

<!-- NEW UI: Main Dashboard Container -->
<main class="dashboard-kanban">

  <!-- NEW UI: Summary Bar with Beer Bottle Shape -->
  <section class="summary-bar">
    <!-- Combined Sales Offer & Job Card -->
    <div class="summary-card combined">
      <div class="combined-content">
        <div class="combined-item">
          <i class="fas fa-handshake"></i>
          <div class="info">
            <h4>24</h4>
            <p>Sales Offer</p>
          </div>
        </div>
        <div class="combined-item">
          <i class="fas fa-briefcase"></i>
          <div class="info">
            <h4>18</h4>
            <p>Job</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="summary-card info">
      <i class="fas fa-clipboard-check"></i>
      <div class="info">
        <h4>32</h4>
        <p>Test Allocated</p>
      </div>
    </div>
    <div class="summary-card warning">
      <i class="fas fa-spinner"></i>
      <div class="info">
        <h4>15</h4>
        <p>Test in Process</p>
      </div>
    </div>
    <div class="summary-card success">
      <i class="fas fa-check-circle"></i>
      <div class="info">
        <h4>28</h4>
        <p>Test Completed</p>
      </div>
    </div>
    <div class="summary-card primary">
      <i class="fas fa-thumbs-up"></i>
      <div class="info">
        <h4>21</h4>
        <p>Test Approved</p>
      </div>
    </div>
    <div class="summary-card secondary">
      <i class="fas fa-file-alt"></i>
      <div class="info">
        <h4>19</h4>
        <p>Report Generated</p>
      </div>
    </div>
  </section>

  <!-- NEW UI: Charts Section -->
  <section class="charts-summary">
    <div class="chart-card">
      <h5>Monthly Test Status</h5>
      <div class="chart-wrapper">
        <canvas id="statusChart"></canvas>
      </div>
    </div>
    <div class="chart-card">
      <h5>Monthly Test Status</h5>
      <div class="chart-wrapper">
        <canvas id="statusChart"></canvas>
      </div>
    </div>
    <div class="chart-card">
      <h5>Pending Test Status</h5>
      <div class="chart-wrapper">
        <canvas id="pieChart"></canvas>
      </div>
    </div>
  </section>
</main>

        <!-- content-wrapper ends -->
        <!-- partial:partials/_footer.html -->
        <footer class="footer">
          <div class="d-sm-flex justify-content-between justify-content-sm-between">
            <span class="text-muted"></span>
            <span>Copyright &copy; <script>document.write(new Date().getFullYear())</script>  <a href="" target="_blank">Ashwamedh Infotech</a>. All rights reserved.</span>
          </div>
        </footer>
         
        <!-- partial -->
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  
  <script type="text/javascript">
    document.onreadystatechange = function () {
      if (document.readyState === "complete") {
        document.getElementById("loaderContainer").style.display = "none";
      }
    };

    // NEW UI: Chart initialization
    document.addEventListener('DOMContentLoaded', function () {
      // --- CHART INITIALIZATION ---
      const statusCtx = document.getElementById('statusChart').getContext('2d');
      new Chart(statusCtx, {
          type: 'bar',
          data: {
            <?php echo "labels: ['" . $labels[0] . "','" . $labels[1]  . "','" . $labels[2]  . "','" . $labels[3] . "'],"; ?>
              datasets: [{
                  label: 'Received by',
                  data: [3, 4, 2],
                  backgroundColor: 'rgba(76, 175, 80, 0.7)',
                  borderColor: 'rgba(76, 175, 80, 1)',
                  borderWidth: 1
              }, {
                  label: 'Released by',
                  data: [2, 3, 4],
                  backgroundColor: 'rgba(255, 152, 0, 0.7)',
                  borderColor: 'rgba(255, 152, 0, 1)',
                  borderWidth: 1
              }, {
                  label: 'Approved by',
                  data: [4, 2, 3],
                  backgroundColor: 'rgba(63, 81, 181, 0.7)',
                  borderColor: 'rgba(63, 81, 181, 1)',
                  borderWidth: 1
              }]
          },
          options: {
              responsive: true,
              maintainAspectRatio: false,
              plugins: {
                  legend: { 
                      display: true,
                      position: 'top'
                  }
              },
              scales: {
                  y: { 
                      beginAtZero: true,
                      ticks: {
                          stepSize: 5
                      }
                  }
              }
          }
      });



      // Pie Chart with original colors
      const pieCtx = document.getElementById('pieChart').getContext('2d');
      new Chart(pieCtx, {
          type: 'doughnut',
          data: {
              labels: ['To Do', 'In Progress', 'Review', 'Done'],
              datasets: [{
                  data: [35, 25, 15, 25],
                  backgroundColor: [
                      'rgba(74, 144, 226, 0.7)',  // Blue for To Do
                      'rgba(240, 173, 78, 0.7)',  // Orange for In Progress
                      'rgba(123, 104, 238, 0.7)', // Purple for Review
                      'rgba(92, 184, 92, 0.7)'    // Green for Done
                  ],
                  borderColor: [
                      'rgba(74, 144, 226, 1)',    // Blue for To Do
                      'rgba(240, 173, 78, 1)',    // Orange for In Progress
                      'rgba(123, 104, 238, 1)',   // Purple for Review
                      'rgba(92, 184, 92, 1)'      // Green for Done
                  ],
                  borderWidth: 1
              }]
          },
          options: {
              responsive: true,
              maintainAspectRatio: false,
              plugins: {
                  legend: {
                      display: true,
                      position: 'right'
                  },
                  tooltip: {
                      callbacks: {
                          label: function(context) {
                              let label = context.label || '';
                              if (label) {
                                  label += ': ';
                              }
                              if (context.parsed !== null) {
                                  label += context.parsed + '%';
                              }
                              return label;
                          }
                      }
                  }
              }
          }
      });

      // --- DRAG AND DROP FUNCTIONALITY ---
      let draggedElement = null;

      const cards = document.querySelectorAll('.kanban-card');
      const columns = document.querySelectorAll('.kanban-column');

      cards.forEach(card => {
          card.addEventListener('dragstart', handleDragStart);
          card.addEventListener('dragend', handleDragEnd);
      });

      columns.forEach(column => {
          column.addEventListener('dragover', handleDragOver);
          column.addEventListener('drop', handleDrop);
          column.addEventListener('dragleave', handleDragLeave);
      });

      function handleDragStart(e) {
          draggedElement = this;
          this.classList.add('dragging');
          e.dataTransfer.effectAllowed = 'move';
          e.dataTransfer.setData('text/html', this.innerHTML);
      }

      function handleDragEnd(e) {
          this.classList.remove('dragging');
          columns.forEach(column => column.classList.remove('drag-over'));
      }

      function handleDragOver(e) {
          if (e.preventDefault) {
              e.preventDefault();
          }
          e.dataTransfer.dropEffect = 'move';
          this.classList.add('drag-over');
          return false;
      }

      function handleDragLeave(e) {
          this.classList.remove('drag-over');
      }

      function handleDrop(e) {
          if (e.stopPropagation) {
              e.stopPropagation();
          }
          this.classList.remove('drag-over');

          if (draggedElement && draggedElement !== this) {
              const targetContainer = this.querySelector('.kanban-cards-container');
              targetContainer.appendChild(draggedElement);
              
              // Update the count in the column header
              updateColumnCounts();
              
              console.log(`Card ${draggedElement.dataset.id} moved to ${this.dataset.status}`);
          }
          return false;
      }
      
      function updateColumnCounts() {
          columns.forEach(column => {
              const count = column.querySelectorAll('.kanban-card').length;
              column.querySelector('.count').textContent = count;
          });
      }
    });
  </script>
  
   <script src="{{asset('bootstrap/vendors/owl-carousel-2/owl.carousel.min.js')}}"></script>
   <script src="{{asset('bootstrap/js/owl-carousel.js')}}"></script>
   <script src="{{asset('bootstrap/js/data-table.js')}}"></script>
     <script src="{{asset('bootstrap/js/js-grid.js')}}"></script>
  <script src="{{asset('bootstrap/js/db.js')}}"></script>
     <script src="{{asset('bootstrap/vendors/moment/moment.min.js')}}"></script>
  <script src="{{asset('bootstrap/vendors/fullcalendar/fullcalendar.min.js')}}"></script>
 
  <script src="{{asset('bootstrap/vendors/datatables.net/jquery.dataTables.js')}}"></script>
  <script src="{{asset('bootstrap/vendors/datatables.net-bs4/dataTables.bootstrap4.js')}}"></script>

  <!-- <script src="https://www.gstatic.com/charts/loader.js"></script> -->
  <script src="{{asset('bootstrap/js/google-charts.js')}}"></script>
<script src="{{asset('bootstrap/js/modal-demo.js')}}"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</x-app-layout>

<?php
} else {
?>
    <x-app-layout>
    
<style type="text/css">
/* New Dashboard Styles */
:root {
  --primary-color: #6B73FF;
  --secondary-color: #9B59B6;
  --success-color: #2ECC71;
  --warning-color: #F39C12;
  --danger-color: #E74C3C;
  --info-color: #1ABC9C;
  --light-bg: #F8F9FA;
  --card-bg: #FFFFFF;
  --text-muted: #6c757d;
  --border-color: #dee2e6;
  --todo-color: #6B73FF;
  --progress-color: #F39C12;
  --review-color: #9B59B6;
  --done-color: #2ECC71;
  
  /* Soft color palette for summary cards */
  --soft-blue: #E3F2FD;
  --soft-purple: #F3E5F5;
  --soft-green: #E8F5E9;
  --soft-orange: #FFF3E0;
  --soft-red: #FFEBEE;
  --soft-teal: #E0F2F1;
  --soft-indigo: #E8EAF6;
}

body {
  background-color: var(--light-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333;
}

/* --- NEW UI: Main Container --- */
.dashboard-kanban {
  padding: 2rem;
}



.quick-links {
  width: 100%;
  display: flex;
  justify-content: center; /* center horizontally */
  margin: 20px 0;
}

.quick-links-container {
  display: flex;
  gap: 30px; /* spacing between items */
  text-align: center;
}

.quick-links-container a {
  text-decoration: none;
  color: black;
}

.quick-links-container img {
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  border-radius: 10px;
  transition: transform 0.2s ease;
}

.quick-links-container img:hover {
  transform: scale(1.1); /* hover zoom effect */
}

/* --- NEW UI: Summary Bar with Beer Bottle Shape --- */
.summary-bar {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.summary-card {
  background: linear-gradient(145deg, #FFFFFF, #F5F7FA);
  border-radius: 25px 25px 45px 45px;
  box-shadow: 
    0 8px 16px rgba(0,0,0,0.08),
    0 3px 6px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: 140px;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.8);
}

/* Combined card special styling */
.summary-card.combined {
  grid-column: span 1;
  flex-direction: row;
  padding: 0 1.5rem;
  justify-content: space-between;
  height: 140px;
}

.summary-card.combined::before {
  width: 80%;
  height: 30px;
}

.summary-card.combined::after {
  width: 50%;
  height: 15px;
}

.summary-card.combined .combined-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 3;
}

.summary-card.combined .combined-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0 0.5rem;
}

.summary-card.combined .combined-item:not(:last-child) {
  border-right: 2px dashed rgba(0,0,0,0.1);
}

.summary-card.combined i {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.summary-card.combined .info h4 {
  font-size: 2rem;
}

.summary-card.combined .info p {
  font-size: 0.9rem;
  font-weight: 600;
}


.summary-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 
    0 15px 30px rgba(0,0,0,0.15),
    0 5px 15px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.summary-card i {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  opacity: 0.85;
  transition: all 0.3s ease;
  position: relative;
  z-index: 3;
}

.summary-card:hover i {
  transform: scale(1.1);
  opacity: 1;
}

.summary-card .info {
  text-align: center;
  position: relative;
  z-index: 3;
}

.summary-card .info h4 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: #2C3E50;
  transition: all 0.3s ease;
}

.summary-card .info p {
  margin: 0.25rem 0 0;
  color: #5A6C7D;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Soft color variants for summary cards */
.summary-card.primary { 
  background: linear-gradient(145deg, var(--soft-blue), #BBDEFB);
  border-color: #90CAF9;
}
.summary-card.primary i { color: #1976D2; }
.summary-card.primary .info h4 { color: #0D47A1; }
.summary-card.primary .info p { color: #1565C0; }

.summary-card.secondary { 
  background: linear-gradient(145deg, var(--soft-purple), #E1BEE7);
  border-color: #CE93D8;
}
.summary-card.secondary i { color: #7B1FA2; }
.summary-card.secondary .info h4 { color: #4A148C; }
.summary-card.secondary .info p { color: #6A1B9A; }

.summary-card.success { 
  background: linear-gradient(145deg, var(--soft-green), #C8E6C9);
  border-color: #A5D6A7;
}
.summary-card.success i { color: #388E3C; }
.summary-card.success .info h4 { color: #1B5E20; }
.summary-card.success .info p { color: #2E7D32; }

.summary-card.warning { 
  background: linear-gradient(145deg, var(--soft-orange), #FFE0B2);
  border-color: #FFCC80;
}
.summary-card.warning i { color: #F57C00; }
.summary-card.warning .info h4 { color: #E65100; }
.summary-card.warning .info p { color: #EF6C00; }

.summary-card.danger { 
  background: linear-gradient(145deg, var(--soft-red), #FFCDD2);
  border-color: #EF9A9A;
}
.summary-card.danger i { color: #C62828; }
.summary-card.danger .info h4 { color: #B71C1C; }
.summary-card.danger .info p { color: #D32F2F; }

.summary-card.info { 
  background: linear-gradient(145deg, var(--soft-teal), #B2DFDB);
  border-color: #80CBC4;
}
.summary-card.info i { color: #00796B; }
.summary-card.info .info h4 { color: #004D40; }
.summary-card.info .info p { color: #00695C; }

/* Combined card gradient */
.summary-card.combined {
  background: linear-gradient(145deg, var(--soft-blue), var(--soft-purple));
  border-color: #90CAF9;
}

/* --- NEW UI: Charts Section --- */
.charts-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.chart-card {
  background-color: var(--card-bg);
  padding: 1.2rem;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05);
}

.charts-summary{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:15px;
}

.chart-card{
    width:100%;
}


.chart-card:hover {
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}
.chart-card h5 {
  margin-bottom: 1rem;
  font-weight: 600;
  color: #2C3E50;
  font-size: 1.1rem;
}
.chart-wrapper {
  position: relative;
  height: 180px;
}

/* --- Responsive Design --- */
@media (max-width: 1200px) {
  .summary-bar { 
    grid-template-columns: repeat(3, 1fr);
  }
  .summary-card.combined {
    grid-column: span 1;
  }
}
@media (max-width: 768px) {
  .charts-summary { grid-template-columns: 1fr; }
  .dashboard-kanban { padding: 1rem; }
  .summary-bar { 
    grid-template-columns: repeat(2, 1fr);
  }
  .summary-card { 
    height: 120px;
  }
  .summary-card.combined {
    flex-direction: column;
    padding: 1rem;
  }
  .summary-card.combined .combined-content {
    flex-direction: column;
  }
  .summary-card.combined .combined-item:not(:last-child) {
    border-right: none;
    border-bottom: 2px dashed rgba(0,0,0,0.1);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }
  .summary-card i { font-size: 1.8rem; }
  .summary-card .info h4 { font-size: 1.5rem; }
  .summary-card.combined i { font-size: 2rem; }
  .summary-card.combined .info h4 { font-size: 1.8rem; }
  .chart-wrapper { height: 150px; }
}
@media (max-width: 480px) {
  .summary-bar { grid-template-columns: 1fr; }
  .summary-card { height: 110px; }
  .summary-card.combined {
    grid-column: span 1;
  }
}

/* Keep your existing styles for the else condition */
.ess-section .card-title,
.quick-links-section .card-title {
    background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
    color: #fff;
    padding: 10px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

@keyframes shine {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.chart-card{
    padding:12px 15px !important;
}

.quick-links-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px;
    flex-wrap:wrap;
    max-width:550px;      /* Compact total width */
    margin:0 auto;
}

.quick-link-item{
    width:90px;
    text-align:center;
}

.quick-link-item button{
    width:50px !important;
    height:50px !important;
    padding:0;
}

.quick-link-item i{
    font-size:22px !important;
}

.quick-link-item p{
    margin:4px 0 0 0;
    font-size:12px;
    line-height:1.2;
    color:#686868;
}

.chart-wrapper{
    min-height:auto !important;
    height:auto !important;
    padding:0 !important;
}

/* Card Backgrounds for ALL dashboard sections */
.ess-section,
.quick-links-section {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(107, 115, 255, 0.08);
    transition: all 0.3s ease;
}

.ess-section:hover,
.quick-links-section:hover {
    box-shadow: 0 6px 18px rgba(107, 115, 255, 0.12);
    transform: translateY(-2px);
}

.my-action1-column, .my-action2-column {
    flex: 1;
    min-width: 300px;
}

.my-action1-column {
        margin-top: 3%;
    }

/* Ensure Links Stay in One Line */
.my-action2-column a {
    color: #333;
    padding: 8px 12px;
    border-left: 3px solid #6B73FF;
    background: #f5f5f5;
    margin-bottom: 5px;
    border-radius: 0 4px 4px 0;
    transition: all 0.3s ease;
}

.my-action2-column a:hover {
    background: #6B73FF;
    color: white;
    padding-left: 16px;
    text-decoration: none;
}

.my-action2-column ul {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

/* Card Title Styling */
.card-title {
    padding: 10px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

/* Button Icon Adjustments */
.btn.btn-social-icon i {
    font-size: 24px;
}

/* Badge Colors */
.badge-blue {
    background-color: #6B73FF;
}

.badge-green {
    background-color: #2ECC71;
}

.badge-red {
    background-color: #E74C3C;
}

.badge-red2 {
    background-color: #C0392B;
}

.badge-green2 {
    background-color: #27AE60;
}

/* Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    text-align: left;
}

.grid-items {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid-items p {
    color: #555;
    font-weight: 500;
}

.grid-items button {
    border: 1px solid #e0e0e0;
    color: white;
    transition: all 0.3s ease;
}

.grid-items button:hover {
    background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
    color: #6B73FF;
    border-color: #6B73FF;
    transform: scale(1.05);
}

/* Close Button */
.close {
    font-size: 35px;
    margin-left: 96%;
    color: white;
    text-decoration: none;
}

/* Loader Styles */
/* .hidden {
    display: none;
} 

.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pixel-loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #6B73FF;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    color: #6B73FF;
    background-color: #6B73FF;
} */

/* Ensures Equal Width for Action Columns */
.my-action1-column, .my-action2-column {
    flex: 1;
    min-width: 48%;
} 

.ess-section, .quick-links-section {
    height: auto;
    min-height: 300px;
}

/* Mobile View Adjustments */
@media (max-width: 768px) {
    .ess-section,
    .quick-links-section {
        box-shadow: 0 3px 8px rgba(107, 115, 255, 0.08);
    }
    .quick-links-section::-webkit-scrollbar {
        width: 6px;
    }

    .quick-links-section::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }

    .quick-links-section::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    .ess-section, .quick-links-section {
        top: -70px;
        margin-bottom: 20px;
        padding: 10px;
        position: relative;
    }

    .quick-links-section .card-title {
        font-size: 18px;
        padding: 8px;
        text-align: center;
    }

    .my-action2-column a {
        font-size: 13px !important;
        padding: 6px 10px;
    }

    .my-action2-column ul {
        padding: 5px;
        margin: 0;
        list-style: none;
    }

    .my-action2-column li {
        margin-bottom: 10px;
    }

    .btn.btn-social-icon {
        width: 50px !important;
        height: 50px !important;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .btn.btn-social-icon i {
        font-size: 24px !important;
    }

    p {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        line-height: 1.3rem;
        text-align: center;
    }

    .stretch-card > .card {
        width: 100%;
        min-width: 90%;
    }
}

/* Tablet View Adjustments */
@media (max-width: 1024px) {
    .grid-items button {
        height: 55px;
        width: 55px;
    }
    
    .grid-items p {
        font-size: 13px;
    }

    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>

  <!-- Add Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="{{asset('bootstrap/vendors/mdi/css/materialdesignicons.min.css')}}">
  <link rel="stylesheet" href="{{asset('bootstrap/vendors/fullcalendar/fullcalendar.min.css')}}">
  <link rel="stylesheet" href="{{asset('bootstrap/vendors/owl-carousel-2/owl.carousel.min.css')}}">
  <link rel="stylesheet" href="{{asset('bootstrap/vendors/owl-carousel-2/owl.theme.default.min.css')}}">
  <link rel="stylesheet" href="{{asset('bootstrap/vendors/font-awesome/css/font-awesome.min.css')}}" />
  
  <!-- Add Chart.js for the new dashboard -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- partial -->

    <div class="container-fluid page-body-wrapper">
      <div class="main-panel">
             
        <div class="content-wrapper">
          <div class="container">

<!-- NEW UI: Main Dashboard Container -->
<main class="dashboard-kanban">

  <!-- NEW UI: Summary Bar with Beer Bottle Shape -->
  <section class="summary-bar">
    <!-- Combined Sales Offer & Job Card -->
    <div class="summary-card combined">
      <div class="combined-content">
        <div class="combined-item">
          <div class="info">
            <p><img src="{{ asset('atk/web/images/' . $comp_logo) }}"
                 style="max-width:125px; max-height:100px; object-fit:contain;"
                 alt="Company Logo"/></p>
          </div>
        </div>
        <div class="combined-item">
          <div class="info" >
            <p style="color:black;"><?php echo $company->company ?? '' ?></p>
            <p style="color:black;"><?php echo Printyymm($company->curr_ym ?? '') ?></p>
          </div>
        </div>
      </div>
    </div>
    <div class="summary-card info">
      <div class="info">
        <h4>{{$actemplcnt}}</h4>
        <p>Active Employees</p>
      </div>
    </div>
    <div class="summary-card warning">
      <div class="info">
        <h4>{{$joinemplcnt}}</h4>
        <p>New Joinee</p>
      </div>
    </div>
    <div class="summary-card success">
      <div class="info">
        <h4>{{$leftemplcnt}}</h4>
        <p>Separations</p>
      </div>
    </div>
    <div class="summary-card primary">
      <div class="info">
        <h4>{{$attrition}} %</h4>
        <p>Attrition</p>
      </div>
    </div>
    <div class="summary-card secondary">
      <div class="info">
        <h4>{{$settlecnt}}</h4>
        <p>Pending Settlements</p>
      </div>
    </div>
  </section>

    
    
  <!-- NEW UI: Charts Section -->
<div class="chart-card">
    <h5 style="text-align:center;">Quick Links</h5>

    <div class="quick-links-row">

        <?php
        $route1 = DB::select("SELECT * FROM accessright WHERE node='Monthly_Process.monthprocess' AND profile='".Auth::user()?->profile."'");
        if(!empty($route1)){
        ?>
        <div class="quick-link-item">
            <button type="button" class="btn btn-social-icon btn-google btn-rounded"
                onclick="window.location.href='{{ route('Process_Salary') }}'">
                <i class="fa fa-cogs"></i>
            </button>
            <p>Process Salary</p>
        </div>
        <?php } ?>

        <?php
        $route2 = DB::select("SELECT * FROM accessright WHERE node='Monthly_Process.showpayslip' AND profile='".Auth::user()?->profile."'");
        if(!empty($route2)){
        ?>
        <div class="quick-link-item">
            <button type="button" class="btn btn-social-icon btn-google btn-rounded"
                onclick="window.location.href='{{ route('Generate_Payslip') }}'">
                <i class="fa fa-print"></i>
            </button>
            <p>Generate Payslip</p>
        </div>
        <?php } ?>

        <?php
        $route3 = DB::select("SELECT * FROM accessright WHERE node='Reports.salreg' AND profile='".Auth::user()?->profile."'");
        if(!empty($route3)){
        ?>
        <div class="quick-link-item">
            <button type="button" class="btn btn-social-icon btn-google btn-rounded"
                onclick="window.location.href='{{ route('Salary_Register') }}'">
                <i class="fa fa-book"></i>
            </button>
            <p>Salary Register</p>
        </div>
        <?php } ?>

        <?php
        $route4 = DB::select("SELECT * FROM accessright WHERE node='incometax.r_itproj' AND profile='".Auth::user()?->profile."'");
        if(!empty($route4)){
        ?>
        <div class="quick-link-item">
            <button type="button" class="btn btn-social-icon btn-google btn-rounded"
                onclick="window.location.href='{{ route('Tax_Projection') }}'">
                <i class="fa fa-bullseye"></i>
            </button>
            <p>Tax Projection</p>
        </div>
        <?php } ?>

    </div>
</div>
<br>
  <!-- NEW UI: Charts Section -->
<section class="charts-summary">
  <div class="chart-card">
    <h5>Monthly Attrition</h5>
    <div class="chart-wrapper">
      <canvas id="statusChart"></canvas>
    </div>
  </div>
  
  
  <div class="chart-card">
    <h5>Workforce Composition</h5>
    <div class="chart-wrapper">
      <canvas id="statusChart"></canvas>
    </div>
  </div>
  
    <div class="chart-card">
    <h5>Monthly Attrition 2</h5>
    <div class="chart-wrapper">
      <canvas id="statusChart"></canvas>
    </div>
  </div>
</section>




 
</main>

        <!-- content-wrapper ends -->
        <!-- partial:partials/_footer.html
        <footer class="footer">
          <div class="d-sm-flex justify-content-between justify-content-sm-between">
            <span class="text-muted"></span>
            <span>Copyright &copy; <script>document.write(new Date().getFullYear())</script>  <a href="" target="_blank">Ashwamedh Infotech</a>. All rights reserved.</span>
          </div>
        </footer>
        -->
        <!-- partial -->
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  
  <script type="text/javascript">
    document.onreadystatechange = function () {
      if (document.readyState === "complete") {
        document.getElementById("loaderContainer").style.display = "none";
      }
    };

    // NEW UI: Chart initialization
    document.addEventListener('DOMContentLoaded', function () {
    // --- CHART INITIALIZATION ---
const statusCtx = document.getElementById('statusChart').getContext('2d');
        new Chart(statusCtx, {
            type: 'bar',
            data: {
                <?php echo "labels: ['" . $labels[0] . "','" . $labels[1]  . "','" . $labels[2]  . "'],"; ?>
                datasets: [
                  //  {
                  //      label: 'Active Employee',
                   //     <?php echo "data: ['" . $actemplarr[0] . "','" . $actemplarr[1]  . "','" . $actemplarr[2]  . "','" . $actemplarr[3] . "'],"; ?>
                   //     backgroundColor: 'rgba(76, 175, 80, 0.7)',
                    //    borderColor: 'rgba(76, 175, 80, 1)',
                   //     borderWidth: 1
                  //  },
                    {
                        label: 'New Joinee',
                        <?php echo "data: ['" . $joinemplarr[0] . "','" . $joinemplarr[1]  . "','" . $joinemplarr[2]  . "'],"; ?>
                        backgroundColor: 'rgba(232, 63, 75, 1)',
                        borderColor: 'rgba(232, 63, 75, 1)',
                        borderWidth: 1
                    },
                    {
                        label: 'Separation',
                        <?php echo "data: ['" . $leftemplarr[0] . "','" . $leftemplarr[1]  . "','" . $leftemplarr[2]  . "'],"; ?>
                        backgroundColor: 'rgba(108, 117, 125, 1)',
                        borderColor: 'rgba(108, 117, 125, 1)',
                        borderWidth: 1
                    },
                 //    {
                 //       label: 'Attrition',
                  //      <?php echo "data: ['" . $attremplarr[0] . "','" . $attremplarr[1]  . "','" . $attremplarr[2]  . "','" . $attremplarr[3] . "'],"; ?>
                  //      backgroundColor: 'rgba(33, 150, 243, 0.7)', // changed color for distinction
                  //      borderColor: 'rgba(33, 150, 243, 1)',
                   //     borderWidth: 1
                   // }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 5
                        }
                    }
                }
            }
        });
        
        


      // Pie Chart with original colors
      const pieCtx = document.getElementById('pieChart').getContext('2d');
      new Chart(pieCtx, {
          type: 'doughnut',
          data: {
              labels: ['To Do', 'In Progress', 'Review', 'Done'],
              datasets: [{
                  data: [35, 25, 15, 25],
                  backgroundColor: [
                      'rgba(74, 144, 226, 0.7)',  // Blue for To Do
                      'rgba(240, 173, 78, 0.7)',  // Orange for In Progress
                      'rgba(123, 104, 238, 0.7)', // Purple for Review
                      'rgba(92, 184, 92, 0.7)'    // Green for Done
                  ],
                  borderColor: [
                      'rgba(74, 144, 226, 1)',    // Blue for To Do
                      'rgba(240, 173, 78, 1)',    // Orange for In Progress
                      'rgba(123, 104, 238, 1)',   // Purple for Review
                      'rgba(92, 184, 92, 1)'      // Green for Done
                  ],
                  borderWidth: 1
              }]
          },
          options: {
              responsive: true,
              maintainAspectRatio: false,
              plugins: {
                  legend: {
                      display: true,
                      position: 'right'
                  },
                  tooltip: {
                      callbacks: {
                          label: function(context) {
                              let label = context.label || '';
                              if (label) {
                                  label += ': ';
                              }
                              if (context.parsed !== null) {
                                  label += context.parsed + '%';
                              }
                              return label;
                          }
                      }
                  }
              }
          }
      });
    });
  </script>
  
   <script src="{{asset('bootstrap/vendors/owl-carousel-2/owl.carousel.min.js')}}"></script>
   <script src="{{asset('bootstrap/js/owl-carousel.js')}}"></script>
   <script src="{{asset('bootstrap/js/data-table.js')}}"></script>
     <script src="{{asset('bootstrap/js/js-grid.js')}}"></script>
  <script src="{{asset('bootstrap/js/db.js')}}"></script>
     <script src="{{asset('bootstrap/vendors/moment/moment.min.js')}}"></script>
  <script src="{{asset('bootstrap/vendors/fullcalendar/fullcalendar.min.js')}}"></script>
 
  <script src="{{asset('bootstrap/vendors/datatables.net/jquery.dataTables.js')}}"></script>
  <script src="{{asset('bootstrap/vendors/datatables.net-bs4/dataTables.bootstrap4.js')}}"></script>

  <!-- <script src="https://www.gstatic.com/charts/loader.js"></script> -->
  <script src="{{asset('bootstrap/js/google-charts.js')}}"></script>
<script src="{{asset('bootstrap/js/modal-demo.js')}}"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    </x-app-layout>

<?php
}
?>