<?php include 'header.php'; ?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Content Calendar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css"/>
<style>

  .card{background:#fff;border-radius:16px;border:1px solid #e5e7eb;padding:24px;max-width:900px;margin:0 auto;box-shadow:0 1px 4px rgba(0,0,0,0.06);}
  .cc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
  .cc-title{font-size:20px;font-weight:600;color:#111827;}
  .tabs{display:flex;gap:0;border-bottom:1.5px solid #e5e7eb;margin-bottom:1.25rem;}
  .tab{font-size:13px;padding:8px 16px;cursor:pointer;color:#6b7280;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:color 0.15s;background:none;border-top:none;border-left:none;border-right:none;}
  .tab.active{color:#2563eb;border-bottom-color:#2563eb;font-weight:600;}
  .tab:hover:not(.active){color:#111827;}
  .cal-nav{display:flex;align-items:center;gap:8px;}
  .cal-month{font-size:16px;font-weight:600;color:#111827;min-width:130px;}
  .nav-btn{background:none;border:1px solid #e5e7eb;border-radius:8px;width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;font-size:14px;}
  .nav-btn:hover{background:#f9fafb;}
  .create-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;}
  .create-btn:hover{background:#1d4ed8;}
  .grid-head{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-bottom:1px;}
  .grid-head-cell{text-align:center;font-size:12px;font-weight:600;color:#6b7280;padding:8px 0;}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:#e5e7eb;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;}
  .cal-cell{background:#fff;min-height:85px;padding:8px;display:flex;flex-direction:column;gap:3px;}
  .cal-cell.other-month{background:#fafafa;}
  .cal-cell.other-month .day-num{color:#d1d5db;}
  .day-num{font-size:13px;font-weight:500;color:#374151;margin-bottom:2px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;}
  .cal-cell.today .day-num{background:#2563eb;color:#fff;font-size:12px;}
  .evt{font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;white-space:nowrap;cursor:default;}
  .evt-post{background:#dbeafe;color:#1e40af;}
  .evt-reel{background:#dcfce7;color:#166534;}
  .evt-story{background:#fef9c3;color:#854d0e;}
  .evt-ad{background:#ede9fe;color:#5b21b6;}
  .list-view{display:none;flex-direction:column;gap:8px;}
  .list-view.visible{display:flex;}
  .list-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;}
  .list-date{font-size:12px;color:#6b7280;min-width:110px;}
  .list-type{font-size:12px;font-weight:600;padding:2px 10px;border-radius:4px;}
  .cal-view{display:block;}
  .cal-view.hidden{display:none;}
  .empty-msg{font-size:13px;color:#9ca3af;padding:1rem 0;}
  @media(max-width:600px){
    body{padding:12px;}
    .tab{padding:7px 10px;font-size:12px;}
    .cal-cell{min-height:60px;padding:5px;}
    .create-btn span{display:none;}
  }
</style>
</head>
<body>

<div class="card">

  <div class="cc-header">
    <span class="cc-title">Content Calendar</span>
  </div>

  <div class="tabs">
    <button class="tab active" onclick="switchTab('calendar',this)">Calendar</button>
    <button class="tab" onclick="switchTab('list',this)">List View</button>
    <button class="tab" onclick="switchTab('posts',this)">All Posts</button>
    <button class="tab" onclick="switchTab('reels',this)">Reels</button>
    <button class="tab" onclick="switchTab('stories',this)">Stories</button>
    <button class="tab" onclick="switchTab('ads',this)">Ads</button>
  </div>

  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:8px;">
    <div class="cal-nav">
      <span class="cal-month" id="monthLabel">May 2025</span>
      <button class="nav-btn" onclick="changeMonth(-1)" title="Previous month"><i class="ti ti-chevron-left"></i></button>
      <button class="nav-btn" onclick="changeMonth(1)" title="Next month"><i class="ti ti-chevron-right"></i></button>
    </div>
    <button class="create-btn" onclick="openCreatePost()">
      <i class="ti ti-plus"></i>
      <span>Create Post</span>
    </button>
  </div>

  <div class="cal-view" id="calendarView">
    <div class="grid-head">
      <div class="grid-head-cell">Sun</div>
      <div class="grid-head-cell">Mon</div>
      <div class="grid-head-cell">Tue</div>
      <div class="grid-head-cell">Wed</div>
      <div class="grid-head-cell">Thu</div>
      <div class="grid-head-cell">Fri</div>
      <div class="grid-head-cell">Sat</div>
    </div>
    <div class="cal-grid" id="calGrid"></div>
  </div>

  <div class="list-view" id="listView"></div>

</div>

<!-- CREATE POST MODAL -->
<div id="modalOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:100;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:16px;padding:28px;width:100%;max-width:420px;margin:0 16px;box-shadow:0 8px 32px rgba(0,0,0,0.12);">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
      <h2 style="font-size:17px;font-weight:600;color:#111827;">Create New Post</h2>
      <button onclick="closeModal()" style="background:none;border:none;cursor:pointer;color:#6b7280;font-size:20px;"><i class="ti ti-x"></i></button>
    </div>
    <div style="display:flex;flex-direction:column;gap:12px;">
      <div>
        <label style="font-size:12px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px;">Date *</label>
        <input type="date" id="postDate" style="width:100%;height:40px;border:1px solid #e5e7eb;border-radius:8px;padding:0 12px;font-size:14px;outline:none;color:#111827;">
      </div>
      <div>
        <label style="font-size:12px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px;">Type *</label>
        <select id="postType" style="width:100%;height:40px;border:1px solid #e5e7eb;border-radius:8px;padding:0 12px;font-size:14px;outline:none;background:#fff;color:#111827;">
          <option value="">Select type</option>
          <option value="post">Post</option>
          <option value="reel">Reel</option>
          <option value="story">Story</option>
          <option value="ad">Ad</option>
        </select>
      </div>
      <div>
        <label style="font-size:12px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px;">Label</label>
        <input type="text" id="postLabel" placeholder="e.g. Product launch post" style="width:100%;height:40px;border:1px solid #e5e7eb;border-radius:8px;padding:0 12px;font-size:14px;outline:none;color:#111827;">
      </div>
    </div>
    <div style="display:flex;gap:8px;margin-top:20px;">
      <button onclick="closeModal()" style="flex:1;height:40px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;font-size:14px;font-weight:500;cursor:pointer;color:#374151;">Cancel</button>
      <button onclick="savePost()" style="flex:1;height:40px;border:none;border-radius:8px;background:#2563eb;color:#fff;font-size:14px;font-weight:600;cursor:pointer;">Save</button>
    </div>
  </div>
</div>

<script>
const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
let curYear = 2025, curMonth = 4;
let activeFilter = 'calendar';

// Sample events — key format: "YYYY-M-D"
const events = {
  '2025-5-2':  [{type:'post',  label:'2 Posts'}],
  '2025-5-3':  [{type:'reel',  label:'1 Reel'}],
  '2025-5-9':  [{type:'reel',  label:'1 Reel'}],
  '2025-5-10': [{type:'reel',  label:'1 Reel'}],
  '2025-5-16': [{type:'reel',  label:'1 Reel'}],
  '2025-5-17': [{type:'post',  label:'2 Posts'}],
  '2025-5-19': [{type:'reel',  label:'1 Reel'}],
  '2025-5-20': [{type:'ad',    label:'1 Ad'}],
  '2025-5-21': [{type:'ad',    label:'1 Ad'}],
  '2025-5-22': [{type:'ad',    label:'1 Ad'}],
  '2025-5-29': [{type:'post',  label:'3 Posts'}],
};

function evtClass(type){
  return type==='post'?'evt-post':type==='reel'?'evt-reel':type==='story'?'evt-story':'evt-ad';
}

function shouldShow(evtType){
  if(activeFilter==='calendar') return true;
  if(activeFilter==='posts')    return evtType==='post';
  if(activeFilter==='reels')    return evtType==='reel';
  if(activeFilter==='stories')  return evtType==='story';
  if(activeFilter==='ads')      return evtType==='ad';
  return true;
}

function renderCalendar(){
  const grid = document.getElementById('calGrid');
  grid.innerHTML = '';
  document.getElementById('monthLabel').textContent = MONTHS[curMonth]+' '+curYear;

  const firstDay    = new Date(curYear, curMonth, 1).getDay();
  const daysInMonth = new Date(curYear, curMonth+1, 0).getDate();
  const daysInPrev  = new Date(curYear, curMonth, 0).getDate();
  const today       = new Date();

  let cells = [];
  for(let i=firstDay-1;i>=0;i--) cells.push({day:daysInPrev-i,other:true});
  for(let i=1;i<=daysInMonth;i++) cells.push({day:i,other:false});
  while(cells.length%7!==0) cells.push({day:cells.length-daysInMonth-firstDay+1,other:true});

  cells.forEach(c=>{
    const div = document.createElement('div');
    div.className = 'cal-cell'+(c.other?' other-month':'');

    const isToday = !c.other && c.day===today.getDate() && curMonth===today.getMonth() && curYear===today.getFullYear();
    if(isToday) div.classList.add('today');

    const dn = document.createElement('div');
    dn.className = 'day-num';
    dn.textContent = c.day;
    div.appendChild(dn);

    if(!c.other){
      const key = curYear+'-'+(curMonth+1)+'-'+c.day;
      (events[key]||[]).forEach(e=>{
        if(!shouldShow(e.type)) return;
        const tag = document.createElement('span');
        tag.className = 'evt '+evtClass(e.type);
        tag.textContent = e.label;
        div.appendChild(tag);
      });
    }
    grid.appendChild(div);
  });
}

function renderList(){
  const lv = document.getElementById('listView');
  lv.innerHTML = '';
  document.getElementById('monthLabel').textContent = MONTHS[curMonth]+' '+curYear;

  const keys = Object.keys(events).sort((a,b)=>{
    const [ay,am,ad] = a.split('-').map(Number);
    const [by,bm,bd] = b.split('-').map(Number);
    return new Date(ay,am-1,ad)-new Date(by,bm-1,bd);
  });

  let count = 0;
  keys.forEach(key=>{
    const [yr,mo,dy] = key.split('-').map(Number);
    if(yr!==curYear||mo-1!==curMonth) return;
    (events[key]||[]).forEach(e=>{
      if(!shouldShow(e.type)) return;
      const item = document.createElement('div');
      item.className = 'list-item';
      const d = new Date(yr,mo-1,dy);
      const dateStr = d.toLocaleDateString('en-GB',{day:'numeric',month:'short',year:'numeric'});
      item.innerHTML = `<span class="list-date"><i class="ti ti-calendar" style="margin-right:5px;font-size:13px;"></i>${dateStr}</span><span class="list-type ${evtClass(e.type)}">${e.label}</span>`;
      lv.appendChild(item);
      count++;
    });
  });

  if(!count){
    const msg = document.createElement('div');
    msg.className = 'empty-msg';
    msg.textContent = 'No items found for this period.';
    lv.appendChild(msg);
  }
}

function switchTab(tab, el){
  activeFilter = tab;
  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
  el.classList.add('active');

  const calView  = document.getElementById('calendarView');
  const listView = document.getElementById('listView');

  if(tab==='list'||tab==='reels'||tab==='posts'||tab==='stories'||tab==='ads'){
    calView.classList.add('hidden');
    listView.classList.add('visible');
    renderList();
  } else {
    calView.classList.remove('hidden');
    listView.classList.remove('visible');
    renderCalendar();
  }
}

function changeMonth(dir){
  curMonth += dir;
  if(curMonth>11){curMonth=0;curYear++;}
  if(curMonth<0){curMonth=11;curYear--;}
  activeFilter==='calendar' ? renderCalendar() : renderList();
}

function openCreatePost(){
  const today = new Date();
  document.getElementById('postDate').value = today.toISOString().split('T')[0];
  document.getElementById('postType').value = '';
  document.getElementById('postLabel').value = '';
  document.getElementById('modalOverlay').style.display = 'flex';
}

function closeModal(){
  document.getElementById('modalOverlay').style.display = 'none';
}

function savePost(){
  const dateVal  = document.getElementById('postDate').value;
  const typeVal  = document.getElementById('postType').value;
  const labelVal = document.getElementById('postLabel').value.trim();

  if(!dateVal || !typeVal){ alert('Please fill in date and type.'); return; }

  const d = new Date(dateVal);
  const key = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
  const typeLabels = {post:'Post',reel:'Reel',story:'Story',ad:'Ad'};
  const label = labelVal || '1 '+typeLabels[typeVal];

  if(!events[key]) events[key] = [];
  events[key].push({type:typeVal, label:label});

  closeModal();
  curYear  = d.getFullYear();
  curMonth = d.getMonth();
  if(activeFilter!=='calendar'){
    document.querySelectorAll('.tab')[0].click();
  } else {
    renderCalendar();
  }
}

// Close modal on backdrop click
document.getElementById('modalOverlay').addEventListener('click', function(e){
  if(e.target===this) closeModal();
});

renderCalendar();
</script>

</body>
</html>

<?php include 'footer.php'; ?>