@extends('layout.mainlayout')

@section('content')
<div class="page-wrapper cardhead">
<div class="content">

<div class="row">
<div class="col-md-12">
@component('components.breadcrumb')
@slot('title') Utilization Analytics @endslot
@endcomponent
</div>
</div>
@can('view-utilization-reports')
{{-- FILTERS --}}
<div class="row mb-3 g-2">
<div class="col-md-3"><input type="date" id="from" class="form-control"></div>
<div class="col-md-3"><input type="date" id="to" class="form-control"></div>

<div class="col-md-3">
<select id="period" class="form-control">
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly" selected>Monthly</option>
<option value="quarterly">Quarterly</option>
<option value="halfyearly">Half Yearly</option>
<option value="yearly">Yearly</option>
</select>
</div>

<div class="col-md-3">
<select id="project" class="form-control" multiple>
@foreach($projects as $p)
<option value="{{ $p->id }}">{{ $p->name }}</option>
@endforeach
</select>
</div>

<div class="col-md-3">
<select id="manager" class="form-control">
<option value="">All Managers</option>
@foreach($managers as $m)
<option value="{{ $m->id }}">{{ $m->name }}</option>
@endforeach
</select>
</div>

<div class="col-md-3">
<select id="team" class="form-control">
<option value="">All Teams</option>
@foreach($teams as $t)
<option value="{{ $t->id }}">{{ $t->name }}</option>
@endforeach
</select>
</div>



<div class="col-md-3">
  <select id="employee_type" class="form-control">
    <option value="">All Employee Types</option>
    @foreach($resourceTypes as $t)
      <option value="{{ $t->id }}">{{ $t->name }}</option>
    @endforeach
  </select>
</div>

<div class="col-md-3">
  <select id="user" class="form-control select2">
    <option value="">All Users</option>
  </select>
</div>



<div class="col-md-12">
<button class="btn btn-primary w-100 mt-2" onclick="loadUtilization()">Apply Filters</button>
</div>
</div>

{{-- KPI --}}
<div class="row g-2 mb-3">
@foreach(['Avg Util %','Total Hours','Paid Leave','LWP'] as $i=>$l)
<div class="col-md-3">
<div class="card text-center shadow-sm">
<div class="card-body py-2">
<small class="text-muted">{{ $l }}</small>
<h4 id="kpi{{ $i }}" class="fw-bold">0</h4>
</div>
</div>
</div>
@endforeach
</div>

{{-- <div class="alert alert-danger small d-none" id="lowAlert">
⚠ Low utilization detected in team
</div> --}}

{{-- CHART GRID --}}
<div class="row g-2">

<div class="col-12">
<div class="card shadow-sm">
<div class="card-header fw-semibold d-flex justify-content-between align-items-center">
<span id="resourceHoursTitle">Resource Working Hours</span>
<small class="text-muted" id="resourceHoursMeta"></small>
</div>
<div class="card-body">
<div class="row g-2 mb-3">
<div class="col-md-3">
<label class="form-label mb-1">Graph View</label>
<select id="resourceChartMode" class="form-control">
<option value="grouped" selected>Grouped Bars</option>
<option value="stacked">Stacked Bars</option>
</select>
</div>
<div class="col-md-3">
<label class="form-label mb-1">Resource Limit</label>
<select id="resourceTopN" class="form-control">
<option value="">All Resources</option>
<option value="5">Top 5</option>
<option value="10">Top 10</option>
<option value="20">Top 20</option>
<option value="50">Top 50</option>
</select>
</div>
</div>
<div id="resourceWorkChart"></div>
</div>
</div>
</div>

<div class="col-md-6">
<div class="card shadow-sm chart-card">
<div class="card-header fw-semibold">Utilization Trend</div>
<div class="card-body"><div id="trendChart"></div></div>
</div>
</div>

<div class="col-md-6">
<div class="card shadow-sm chart-card">
<div class="card-header fw-semibold">Utilization %</div>
<div class="card-body"><canvas id="barChart"></canvas></div>
</div>
</div>

<div class="col-md-6">
<div class="card shadow-sm chart-card">
<div class="card-header fw-semibold">Project Utilization</div>
<div class="card-body"><div id="projectPie"></div></div>
</div>
</div>

<div class="col-md-6">
<div class="card shadow-sm chart-card">
<div class="card-header fw-semibold">Team Ranking</div>
<div class="card-body p-2">

<input type="text" id="rankSearch" class="rank-search mb-2" placeholder="Search user...">

<div class="rank-scroll">
<table class="table table-sm mb-0">
<thead class="table-light">
<tr><th>#</th><th>User</th><th>%</th><th></th></tr>
</thead>
<tbody id="rankingTable"></tbody>
</table>
</div>

</div>

</div>
</div>

</div>
</div>
</div>

{{-- MODAL --}}
<div class="modal fade" id="userModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5>User Performance</h5>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<canvas id="userChart"></canvas>
</div>
</div>
</div>
</div>
@endcan
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
let barChart,trendChart,pieChart,userChart,resourceWorkChart;
let latestResourceHoursPayload = null;
let latestResourcePeriodLabel = '';

// ============================
// SET DEFAULT MONTH
// ============================
function setDefaultDates(){
 let today=new Date();
 let first=new Date(today.getFullYear(),today.getMonth(),1);

 from.value=first.toISOString().split('T')[0];
 to.value=today.toISOString().split('T')[0];
}

// ============================
// MAIN LOAD
// ============================

// document.getElementById('rankSearch').addEventListener('keyup',function(){
//  let v=this.value.toLowerCase();
//  document.querySelectorAll('#rankingTable tr').forEach(r=>{
//    r.style.display = r.innerText.toLowerCase().includes(v) ? '' : 'none';
//  });
// });


function loadUtilization(){

if(!from.value || !to.value) setDefaultDates();

let projects=[...project.selectedOptions].map(o=>o.value);
let employeeType=employee_type.value;

//let url=`/utilization/data?from=${from.value}&to=${to.value}&period=${period.value}&manager=${manager.value}&team=${team.value}&projects=${projects.join(',')}`;
let url=`/utilization/data
?from=${from.value}
&to=${to.value}
&period=${period.value}
&manager=${manager.value}
&team=${team.value}
&employee_type=${employee_type.value}
&user_id=${user.value}
&resource_top_n=${resourceTopN.value}
&projects=${projects.join(',')}`;


fetch(url)
.then(res=>{
 if(!res.ok){
  return res.text().then(t=>{console.error(t);throw "API error"});
 }
 return res.json();
})
.then(data=>{

kpi0.innerText=data.avg_util+'%';
kpi1.innerText=data.total_hours;
kpi2.innerText=data.leave;
kpi3.innerText=data.lwp;

let labels=data.chart.map(x=>x.period);
let values=data.chart.map(x=>x.util);
const periodLabel = period.options[period.selectedIndex]?.text || period.value;

// BAR
barChart?.destroy();
barChart=new Chart(document.getElementById('barChart'),{
 type:'bar',
 data:{labels,datasets:[{label:'Util %',data:values}]}
});

// LINE
trendChart?.destroy();
document.querySelector("#trendChart").innerHTML = '';

trendChart=new ApexCharts(document.querySelector("#trendChart"),{
 chart:{type:'line'},
 series:[{name:'Util %',data:values}],
 xaxis:{categories:labels}
});
trendChart.render();

// PIE
// 🥧 PROJECT PIE — FIXED FORMAT

// 🥧 ENHANCED PROJECT PIE

let pieData = data.projects
    .filter(p => Number(p.worked_hours) > 0)        // hide zero
    .sort((a,b)=>b.worked_hours-a.worked_hours);   // sort highest first

const pieValues = pieData.map(p => Number(p.worked_hours));
const pieLabels = pieData.map(p => p.project);

const colors = [
 '#4e79a7','#f28e2b','#e15759','#76b7b2',
 '#59a14f','#edc948','#b07aa1','#ff9da7'
];

pieChart?.destroy();

pieChart = new ApexCharts(document.querySelector("#projectPie"), {
    chart: { type: 'pie', height: 350 },
    series: pieValues,
    labels: pieLabels,
    colors: colors,
    legend: { position: 'bottom' },
    dataLabels: {
        enabled: true,
        formatter: val => val.toFixed(1) + '% of effort'
    },
    tooltip:{
        y:{ formatter: v => v + ' hrs' }
    }
});

pieChart.render();

latestResourceHoursPayload = data.resource_hours_chart || null;
latestResourcePeriodLabel = periodLabel;
renderResourceHoursChart(latestResourceHoursPayload, latestResourcePeriodLabel);

loadRanking();

// document.getElementById('rankSearch').addEventListener('keyup',function(){
//  let v=this.value.toLowerCase();
//  document.querySelectorAll('#rankingTable tr').forEach(r=>{
//    r.style.display = r.innerText.toLowerCase().includes(v) ? '' : 'none';
//  });
// });


});
}

function renderResourceHoursChart(payload, periodLabel){
 const target = document.querySelector("#resourceWorkChart");
 const title = document.getElementById("resourceHoursTitle");
 const meta = document.getElementById("resourceHoursMeta");
 const mode = document.getElementById("resourceChartMode")?.value || 'grouped';
 const labels = payload?.labels || [];
 const series = payload?.series || [];
 const totalResourceCount = payload?.resource_count || 0;

 title.textContent = `Resource Working Hours (${periodLabel})`;
 meta.textContent = `${totalResourceCount} resource(s)`;

 resourceWorkChart?.destroy();
 target.innerHTML = '';

 if (!labels.length || !series.length) {
   target.innerHTML = `<div class="text-muted py-4 text-center">No working-hours data for selected filters.</div>`;
   return;
 }

 resourceWorkChart = new ApexCharts(target, {
   chart: {
     type: 'bar',
     height: 420,
     stacked: mode === 'stacked',
     toolbar: { show: true }
   },
   series: series,
   xaxis: {
     categories: labels,
     title: { text: 'Selected Period Buckets' }
   },
   yaxis: {
     title: { text: 'Working Hours' },
     labels: {
       formatter: (v) => Number(v).toFixed(1)
     }
   },
   plotOptions: {
     bar: {
       horizontal: false,
       columnWidth: '55%'
     }
   },
   dataLabels: { enabled: false },
   stroke: { width: 1 },
   legend: { position: 'bottom' },
   tooltip: {
     y: {
       formatter: (v) => `${Number(v).toFixed(2)} hrs`
     }
   }
 });

 resourceWorkChart.render();
}

// ============================
// RANKING
// ============================
function loadRanking(){

let url=`/utilization/ranking
?from=${from.value}
&to=${to.value}
&manager=${manager.value}
&team=${team.value}
&employee_type=${employee_type.value}
&user_id=${user.value}
&projects=${[...project.selectedOptions].map(o=>o.value).join(',')}`; 

fetch(url)

//fetch(`/utilization/ranking?from=${from.value}&to=${to.value}&manager=${manager.value}&team=${team.value}&employee_type=${employee_type.value}&user_id=${user.value}&projects=${[...project.selectedOptions].map(o=>o.value).join(',')}`)

.then(r=>r.json())
.then(list=>{
 let html='',low=false;
 list.forEach((u,i)=>{
  if(u.utilization<60) low=true;
  html+=`<tr>
<td>${i+1}</td>
<td>${u.name}</td>
<td>${u.utilization}%</td>
<td><button class="btn btn-sm btn-primary" onclick="openUser(${u.user_id})">View</button></td>
</tr>`;
 });
 rankingTable.innerHTML=html;
 const lowAlertEl = document.getElementById('lowAlert');
 if (lowAlertEl) {
   lowAlertEl.classList.toggle('d-none', !low);
 }
});
}

// ============================
// USER MODAL
// ============================
function openUser(id){
//fetch(`/utilization/user?user_id=${id}&from=${from.value}&to=${to.value}&period=${period.value}`)
fetch(`/utilization/user
?user_id=${id}
&from=${from.value}
&to=${to.value}
&period=${period.value}
&employee_type=${employee_type.value}`)

.then(r=>r.json())
.then(res=>{
 let labels=res.map(x=>x.period);
 let hours=res.map(x=>x.hours);

 userChart?.destroy();
userChart=new Chart(document.getElementById('userChart'),{
  type:'line',
  data:{labels,datasets:[{label:'Hours',data:hours}]}
 });

 new bootstrap.Modal(userModal).show();
});
}

function loadUsers() {
  const url =
    `/utilization/users?manager=${encodeURIComponent(manager.value)}` +
    `&team=${encodeURIComponent(team.value)}` +
    `&employee_type=${encodeURIComponent(employee_type.value)}`;

  fetch(url)
    .then(res => {
      if (!res.ok) {
        return res.text().then(t => {
          console.error('User API error:', t);
          throw 'User API failed';
        });
      }
      return res.json();
    })
    .then(list => {
      user.innerHTML = `<option value="">All Users</option>`;
      list.forEach(u => {
        user.innerHTML += `<option value="${u.id}">${u.name}</option>`;
      });
      if (window.jQuery && $.fn.select2) {
        $('#user').trigger('change.select2');
      }
    })
    .catch(err => console.error(err));
}



manager.addEventListener('change', loadUsers);
team.addEventListener('change', loadUsers);
employee_type.addEventListener('change', loadUsers);
document.getElementById('resourceChartMode').addEventListener('change', function() {
 if (latestResourceHoursPayload) {
  renderResourceHoursChart(latestResourceHoursPayload, latestResourcePeriodLabel);
 }
});
document.getElementById('resourceTopN').addEventListener('change', loadUtilization);
// ============================
document.addEventListener('DOMContentLoaded',()=>{
 if (window.jQuery && $.fn.select2) {
  $('#user').select2({
   placeholder: 'All Users',
   allowClear: true,
   width: '100%'
  });
 }

 setDefaultDates();
loadUsers();
 loadUtilization();


 document.getElementById('rankSearch').addEventListener('keyup',function(){
 let v=this.value.toLowerCase();
 document.querySelectorAll('#rankingTable tr').forEach(r=>{
   r.style.display = r.innerText.toLowerCase().includes(v) ? '' : 'none';
 });
});

});
</script>
@endpush

<style>
.chart-card{
    height:600px;
}
.chart-card .card-body{
    height:550px;
}

.rank-scroll{
    max-height:480px;
    overflow-y:auto;
}

.rank-search{
    border:none;
    border-bottom:1px solid #ddd;
    width:100%;
    padding:6px 8px;
    outline:none;
}

.rank-search:focus{
    border-color:#0d6efd;
}
.chart-card canvas {
    max-height: 100%;
}

</style>