@extends('layouts.app')

@section('title', 'Dashboard — OREST Staff Portal')
@section('page-title', 'Dashboard')

@section('styles')
<style>
.cal-wrap{display:grid;grid-template-columns:1fr 300px;border:1px solid #e6e9ef;border-radius:12px;overflow:hidden;background:#fff;min-height:520px}
.cal-left{padding:1.25rem;border-right:1px solid #e6e9ef}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.cal-title{font-size:15px;font-weight:600;color:#1f2d3d}
.cal-nav button{background:none;border:1px solid #e6e9ef;border-radius:8px;width:28px;height:28px;cursor:pointer;color:#676879;display:flex;align-items:center;justify-content:center}
.cal-nav button:hover{background:#f6f7fb}
.cal-nav{display:flex;gap:4px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow{font-size:11px;color:#676879;text-align:center;padding:4px 0;font-weight:500}
.cal-day{min-height:52px;padding:4px;border-radius:6px;cursor:pointer;transition:background .15s}
.cal-day:hover{background:#f6f7fb}
.cal-day.today .day-num{background:#0073ea;color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.cal-day.selected{background:#f0f7ff}
.cal-day.other-month .day-num{color:#c0c0c0}
.day-num{font-size:12px;color:#1f2d3d;width:22px;height:22px;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.day-dots{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}
.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.cal-right{background:#f6f7fb;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}
.panel-date{font-size:14px;font-weight:600;color:#1f2d3d}
.panel-day{font-size:11px;color:#676879;margin-top:2px}
.event-list{display:flex;flex-direction:column;gap:8px;flex:1;overflow-y:auto;max-height:380px}
.event-item{background:#fff;border:1px solid #e6e9ef;border-radius:8px;padding:.625rem .75rem;display:flex;gap:10px}
.event-color{width:3px;border-radius:2px;flex-shrink:0;align-self:stretch;min-height:32px}
.event-name{font-size:13px;color:#1f2d3d;font-weight:500;line-height:1.3}
.event-time{font-size:11px;color:#676879;margin-top:2px}
.event-cal{font-size:10px;color:#aaa;margin-top:2px}
.no-events{font-size:13px;color:#aaa;text-align:center;padding:2rem 0}
.legend{display:flex;flex-direction:column;gap:4px;padding-top:.75rem;border-top:1px solid #e6e9ef}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:#676879}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
</style>
@endsection

@section('content')
<div class="cal-wrap">
  <div class="cal-left">
    <div class="cal-header">
      <span class="cal-title" id="cal-title"></span>
      <div class="cal-nav">
        <button onclick="changeMonth(-1)"><i class="ti ti-chevron-left"></i></button>
        <button onclick="changeMonth(1)"><i class="ti ti-chevron-right"></i></button>
      </div>
    </div>
    <div class="cal-grid">
      <div class="cal-dow">Sun</div><div class="cal-dow">Mon</div><div class="cal-dow">Tue</div>
      <div class="cal-dow">Wed</div><div class="cal-dow">Thu</div><div class="cal-dow">Fri</div>
      <div class="cal-dow">Sat</div>
    </div>
    <div class="cal-grid" id="cal-days"></div>
  </div>
  <div class="cal-right">
    <div>
      <div class="panel-date" id="panel-date">Select a date</div>
      <div class="panel-day" id="panel-day"></div>
    </div>
    <div class="event-list" id="event-list"><div class="no-events">Select a date to view events</div></div>
    <div class="legend" id="legend"></div>
  </div>
</div>

<script>
const API_KEY='AIzaSyDX1LtUxF9PvfHIBvcPAHRausONIvwcTY4';
const CALENDARS=[
  {id:'schoolofprofessional2018@gmail.com',color:'#F1C40F',name:'Main'},
  {id:'cp1l0b8l4dospdrqor152mhtb0@group.calendar.google.com',color:'#27AE60',name:'Training'},
  {id:'tgq1425c27evgvg2ume87jsgcs@group.calendar.google.com',color:'#0f3cf1',name:'Schedule'},
  {id:'8e98393c7945c121df743e7b31ff8db141d7a3cf0a657253af86ee924bc6dfef@group.calendar.google.com',color:'#f10f3c',name:'Events'},
  {id:'0k8vqg4lpbe12l3kbcp6vovrg0@group.calendar.google.com',color:'#f1530f',name:'Internal'},
  {id:'en.malaysia#holiday@group.v.calendar.google.com',color:'#555555',name:'Malaysia Holidays'}
];
const MONTHS=['January','February','March','April','May','June','July','August','September','October','November','December'];
const DAYS=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
let currentDate=new Date(),selectedDate=new Date(),allEvents=[],fetchedMonths={};
async function fetchEvents(y,m){
  const key=`${y}-${m}`;if(fetchedMonths[key])return;fetchedMonths[key]=true;
  const tMin=new Date(y,m,1).toISOString(),tMax=new Date(y,m+1,0,23,59,59).toISOString();
  await Promise.all(CALENDARS.map(async cal=>{
    try{
      const r=await fetch(`https://www.googleapis.com/calendar/v3/calendars/${encodeURIComponent(cal.id)}/events?key=${API_KEY}&timeMin=${tMin}&timeMax=${tMax}&singleEvents=true&orderBy=startTime&maxResults=50`);
      const d=await r.json();
      if(d.items)d.items.forEach(ev=>allEvents.push({title:ev.summary||'(No title)',start:ev.start.dateTime||ev.start.date,end:ev.end?(ev.end.dateTime||ev.end.date):null,color:cal.color,calName:cal.name,allDay:!ev.start.dateTime}));
    }catch(e){}
  }));
  renderCalendar();showEventsForDate(selectedDate);
}
function getEventsForDate(date){
  const ds=`${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`;
  return allEvents.filter(ev=>{const s=ev.start.substring(0,10),e=ev.end?ev.end.substring(0,10):s;return ds>=s&&ds<=e;});
}
function renderCalendar(){
  const y=currentDate.getFullYear(),m=currentDate.getMonth();
  document.getElementById('cal-title').textContent=`${MONTHS[m]} ${y}`;
  const firstDay=new Date(y,m,1).getDay(),daysInMonth=new Date(y,m+1,0).getDate(),daysInPrev=new Date(y,m,0).getDate(),today=new Date();
  const totalCells=Math.ceil((firstDay+daysInMonth)/7)*7;
  let html='';
  for(let i=0;i<totalCells;i++){
    let day,isOther=false,dateObj;
    if(i<firstDay){day=daysInPrev-firstDay+i+1;isOther=true;dateObj=new Date(y,m-1,day);}
    else if(i>=firstDay+daysInMonth){day=i-firstDay-daysInMonth+1;isOther=true;dateObj=new Date(y,m+1,day);}
    else{day=i-firstDay+1;dateObj=new Date(y,m,day);}
    const isToday=dateObj.toDateString()===today.toDateString(),isSelected=dateObj.toDateString()===selectedDate.toDateString();
    const events=getEventsForDate(dateObj);
    const dots=[...new Set(events.map(e=>e.color))].slice(0,4).map(c=>`<div class="dot" style="background:${c}"></div>`).join('');
    const ds=`${dateObj.getFullYear()}-${String(dateObj.getMonth()+1).padStart(2,'0')}-${String(dateObj.getDate()).padStart(2,'0')}`;
    html+=`<div class="cal-day${isOther?' other-month':''}${isToday?' today':''}${isSelected?' selected':''}" onclick="selectDate('${ds}')"><div class="day-num">${day}</div>${dots?`<div class="day-dots">${dots}</div>`:''}</div>`;
  }
  document.getElementById('cal-days').innerHTML=html;
}
function selectDate(ds){selectedDate=new Date(ds+'T00:00:00');renderCalendar();showEventsForDate(selectedDate);}
function showEventsForDate(date){
  const events=getEventsForDate(date);
  document.getElementById('panel-date').textContent=`${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()}`;
  document.getElementById('panel-day').textContent=DAYS[date.getDay()];
  const list=document.getElementById('event-list');
  if(!events.length){list.innerHTML='<div class="no-events">No events today</div>';return;}
  list.innerHTML=events.map(ev=>{
    const t=ev.allDay?'All day':new Date(ev.start).toLocaleTimeString('en-MY',{hour:'2-digit',minute:'2-digit'});
    return`<div class="event-item"><div class="event-color" style="background:${ev.color}"></div><div><div class="event-name">${ev.title}</div><div class="event-time">${t}</div><div class="event-cal">${ev.calName}</div></div></div>`;
  }).join('');
}
function changeMonth(dir){currentDate.setMonth(currentDate.getMonth()+dir);renderCalendar();fetchEvents(currentDate.getFullYear(),currentDate.getMonth());}
document.getElementById('legend').innerHTML=CALENDARS.map(c=>`<div class="legend-item"><div class="legend-dot" style="background:${c.color}"></div>${c.name}</div>`).join('');
renderCalendar();selectDate(new Date().toISOString().split('T')[0]);fetchEvents(currentDate.getFullYear(),currentDate.getMonth());
</script>
@endsection