<?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>Employee Ledger</title>

<script src="https://cdn.tailwindcss.com"></script>

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>

</head>

<body class="bg-[#f5f7ff] font-['DM_Sans'] text-gray-900 min-h-screen p-2 sm:p-4 md:p-5">

<div class="max-w-7xl mx-auto bg-white border border-gray-200 rounded-[26px] shadow-lg overflow-hidden mt-5">

  <!-- TOP SECTION -->

  <div class="p-3 sm:p-5 md:p-6">

    <div class="bg-white border border-gray-100 shadow-md rounded-[24px] p-4 md:p-5">

      <div class="flex flex-col xl:flex-row xl:items-center xl:justify-between gap-5">

        <!-- LEFT -->

        <div class="flex items-start sm:items-center gap-4">

          <div class="w-16 h-16 rounded-2xl bg-black text-white flex items-center justify-center text-2xl font-bold shrink-0">
            RM
          </div>

          <div class="min-w-0">

            <h2 class="text-xl sm:text-2xl font-bold truncate">
              Rahul Mehta
            </h2>

            <p class="text-gray-500 text-sm mt-1">
              Senior Developer • Engineering Department
            </p>

            <div class="flex flex-wrap gap-2 mt-3">

              <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-[11px] font-semibold">
                Active
              </span>

              <span class="px-3 py-1 rounded-full bg-gray-100 text-gray-700 text-[11px] font-semibold">
                Full Time
              </span>

            </div>

          </div>

        </div>

        <!-- RIGHT -->

        <div class="grid grid-cols-2 gap-x-5 gap-y-4 text-sm w-full xl:w-auto">

          <div>

            <div class="text-gray-400 text-xs">
              Employee ID
            </div>

            <div class="font-semibold mt-1">
              EMP-00142
            </div>

          </div>

          <div>

            <div class="text-gray-400 text-xs">
              Department
            </div>

            <div class="font-semibold mt-1">
              Engineering
            </div>

          </div>

          <div>

            <div class="text-gray-400 text-xs">
              Email
            </div>

            <div class="font-semibold mt-1 break-all">
              rahul@company.com
            </div>

          </div>

          <div>

            <div class="text-gray-400 text-xs">
              Salary Month
            </div>

            <div id="salaryMonthText" class="font-semibold mt-1">
              May 2026
            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

  <!-- CONTENT -->

  <div class="px-3 pb-3 sm:px-5 sm:pb-5 md:px-6 md:pb-6 space-y-4">

    <!-- SUMMARY -->

<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-7 gap-3">

  <!-- Gross Salary -->
  <div class="bg-white border border-gray-100 rounded-2xl shadow-sm p-4">
    <div class="text-gray-400 text-xs sm:text-sm">
      Gross Salary
    </div>

    <div id="grossSalaryCard" class="text-lg sm:text-2xl font-bold mt-2">
      ₹45,000
    </div>
  </div>

  <!-- Final Salary -->
  <div class="bg-white border border-gray-100 rounded-2xl shadow-sm p-4">
    <div class="text-gray-400 text-xs sm:text-sm">
      Final Salary
    </div>

    <div id="finalSalaryCard" class="text-lg sm:text-2xl font-bold text-green-600 mt-2">
      ₹45,000
    </div>
  </div>

  <!-- Leave Deduction -->
  <div class="bg-white border border-gray-100 rounded-2xl shadow-sm p-4">
    <div class="text-gray-400 text-xs sm:text-sm">
      Leave Deduction
    </div>

    <div id="leaveDeductionCard" class="text-lg sm:text-2xl font-bold text-red-500 mt-2">
      ₹0
    </div>
  </div>

  <!-- Total Leave Days -->
  <div class="bg-white border border-gray-100 rounded-2xl shadow-sm p-4">
    <div class="text-gray-400 text-xs sm:text-sm">
      Total Leave Days
    </div>

    <div id="totalLeaveDaysCard" class="text-lg sm:text-2xl font-bold text-blue-600 mt-2">
      0
    </div>
  </div>

  <!-- Extra Leave Allowed -->
  <div class="bg-white border border-gray-100 rounded-2xl shadow-sm p-4">
    <div class="text-gray-400 text-xs sm:text-sm">
      Extra Leave Allowed
    </div>

    <div id="extraLeaveAllowedCard" class="text-lg sm:text-2xl font-bold text-purple-600 mt-2">
      0
    </div>
  </div>

  <!-- Paid Leaves -->
  <div class="bg-white border border-gray-100 rounded-2xl shadow-sm p-4">
    <div class="text-gray-400 text-xs sm:text-sm">
      Paid Leaves
    </div>

    <div id="paidLeavesCard" class="text-lg sm:text-2xl font-bold text-green-500 mt-2">
      0
    </div>
  </div>

  <!-- Deductible Leaves -->
  <div class="bg-white border border-gray-100 rounded-2xl shadow-sm p-4">
    <div class="text-gray-400 text-xs sm:text-sm">
      Deductible Leaves
    </div>

    <div id="deductibleLeavesCard" class="text-lg sm:text-2xl font-bold text-orange-500 mt-2">
      0
    </div>
  </div>

</div>
    
    
<!-- SALARY BREAKDOWN TABLE -->

<div class="bg-white border border-gray-100 rounded-[24px] shadow-sm p-4 sm:p-5 mt-4">

  <div class="flex items-center justify-between mb-4">

    <h2 class="text-lg sm:text-xl font-bold text-gray-900">
      Salary Breakdown
    </h2>

    <span class="text-xs text-gray-400 font-medium">
      Payroll Details
    </span>

  </div>

  <div class="overflow-hidden border border-gray-200 rounded-2xl">

    <div class="overflow-x-auto">

      <table class="w-full min-w-[700px] border-collapse">

        <thead class="bg-gray-50">

          <tr>

            <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wide text-gray-500 border-b border-gray-200">
              Description
            </th>

            <th class="px-4 py-3 text-right text-[11px] font-bold uppercase tracking-wide text-gray-500 border-b border-gray-200">
              Value
            </th>

          </tr>

        </thead>

        <tbody>

          <tr class="hover:bg-gray-50 transition">

            <td class="px-4 py-3 text-sm font-medium text-gray-700 border-b border-gray-100">
              Gross Salary
            </td>

            <td id="breakdownGrossSalary"
              class="px-4 py-3 text-sm font-bold text-right text-gray-900 border-b border-gray-100">
              ₹0
            </td>

          </tr>

          <tr class="hover:bg-blue-50 transition">

            <td class="px-4 py-3 text-sm font-medium text-blue-700 border-b border-gray-100">
              Per Day Salary
            </td>

            <td id="breakdownPerDaySalary"
              class="px-4 py-3 text-sm font-bold text-right text-blue-700 border-b border-gray-100">
              ₹0
            </td>

          </tr>

          <tr class="hover:bg-red-50 transition">

            <td class="px-4 py-3 text-sm font-medium text-red-700 border-b border-gray-100">
              Total Leave Days (Raw)
            </td>

            <td id="breakdownTotalLeave"
              class="px-4 py-3 text-sm font-bold text-right text-red-700 border-b border-gray-100">
              0
            </td>

          </tr>

          <tr class="hover:bg-green-50 transition">

            <td class="px-4 py-3 text-sm font-medium text-green-700 border-b border-gray-100">
              Paid Leaves (Within Allowance)
            </td>

            <td id="breakdownPaidLeaves"
              class="px-4 py-3 text-sm font-bold text-right text-green-700 border-b border-gray-100">
              0
            </td>

          </tr>

          <tr class="hover:bg-purple-50 transition">

            <td class="px-4 py-3 text-sm font-medium text-purple-700 border-b border-gray-100">
              Deductible Leaves
            </td>

            <td id="breakdownDeductibleLeaves"
              class="px-4 py-3 text-sm font-bold text-right text-purple-700 border-b border-gray-100">
              0
            </td>

          </tr>

          <tr class="hover:bg-emerald-50 transition">

            <td class="px-4 py-3 text-sm font-medium text-emerald-700 border-b border-gray-100">
              Final Salary
            </td>

            <td id="breakdownFinalSalary"
              class="px-4 py-3 text-sm font-bold text-right text-emerald-700 border-b border-gray-100">
              ₹0
            </td>

          </tr>

          <tr class="hover:bg-orange-50 transition">

            <td class="px-4 py-3 text-sm font-medium text-orange-700">
              Extra Break Minutes
            </td>

            <td id="breakdownExtraBreak"
              class="px-4 py-3 text-sm font-bold text-right text-orange-700">
              0 Min
            </td>

          </tr>

        </tbody>

      </table>

    </div>

  </div>

</div>

    <!-- LEDGER -->

    <div class="bg-white border border-gray-100 rounded-[24px] shadow-sm p-3 sm:p-4">

      <!-- TOP -->

      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">

        <h2 class="text-lg sm:text-xl font-bold text-gray-900">
          Attendance Ledger
        </h2>

        <div class="flex items-center gap-2 flex-wrap">

          <select
            id="monthSelect"
            class="h-11 px-4 rounded-xl border border-gray-200 bg-white text-sm font-semibold outline-none focus:border-[#635bff] min-w-[140px]"
          ></select>

          <select
            id="yearSelect"
            class="h-11 px-4 rounded-xl border border-gray-200 bg-white text-sm font-semibold outline-none focus:border-[#635bff]"
          >
            <option value="2024">2024</option>
            <option value="2025">2025</option>
            <option value="2026" selected>2026</option>
            <option value="2027">2027</option>
            <option value="2028">2028</option>
          </select>

        </div>

      </div>

      <!-- TABLE -->

      <div class="overflow-hidden border border-gray-200 rounded-2xl">

        <div class="overflow-auto max-h-[340px] sm:max-h-[380px]">

          <table class="w-full min-w-[900px] border-collapse">

            <thead class="sticky top-0 z-10 bg-gray-50">

              <tr>

                <th class="px-1 py-1.5 text-[11px] font-bold uppercase tracking-wide text-gray-500 text-center border-b border-gray-200 whitespace-nowrap">
                  Date
                </th>

                <th class="px-1 py-1.5 text-[11px] font-bold uppercase tracking-wide text-gray-500 text-center border-b border-gray-200 whitespace-nowrap">
                  In - Out
                </th>

                <th class="px-1 py-1.5 text-[11px] font-bold uppercase tracking-wide text-gray-500 text-center border-b border-gray-200 whitespace-nowrap">
                  First Break
                </th>

                <th class="px-1 py-1.5 text-[11px] font-bold uppercase tracking-wide text-gray-500 text-center border-b border-gray-200 whitespace-nowrap">
                  Lunch Break
                </th>

                <th class="px-1 py-1.5 text-[11px] font-bold uppercase tracking-wide text-gray-500 text-center border-b border-gray-200 whitespace-nowrap">
                  Second Break
                </th>

                <th class="px-1 py-1.5 text-[11px] font-bold uppercase tracking-wide text-gray-500 text-center border-b border-gray-200 whitespace-nowrap">
                  Extra Break
                </th>

                <th class="px-1 py-1.5 text-[11px] font-bold uppercase tracking-wide text-gray-500 text-center border-b border-gray-200 whitespace-nowrap">
                  Day
                </th>

                <th class="px-2 py-2 text-[11px] font-bold uppercase tracking-wide text-gray-500 text-center border-b border-gray-200 min-w-[180px]">
                  Leave Status
                </th>

                <th class="px-1 py-1.5 text-[11px] font-bold uppercase tracking-wide text-gray-500 text-center border-b border-gray-200 whitespace-nowrap">
                  Per Day Salary
                </th>

              </tr>

            </thead>

            <tbody id="attendanceTbody"></tbody>

          </table>

        </div>

      </div>

    </div>

  </div>

</div>

<script>

const MONTHS = [
  'January','February','March','April','May','June',
  'July','August','September','October','November','December'
];

const DAYS = [
  'Sun','Mon','Tue','Wed','Thu','Fri','Sat'
];

function fmtINR(n){
  return '₹' + n.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g,',');
}

const monthSelect = document.getElementById('monthSelect');
const yearSelect = document.getElementById('yearSelect');

MONTHS.forEach((month,index)=>{

  const option = document.createElement('option');

  option.value = index;

  option.textContent = month;

  monthSelect.appendChild(option);

});

monthSelect.value = new Date().getMonth();

function regenerate(){

  const month = parseInt(monthSelect.value);

  const year = parseInt(yearSelect.value);

  const gross = 45000;
  let totalLeaveDays = 0;

let paidLeaves = 0;

let deductibleLeaves = 0;

const extraLeaveAllowed = 2;
let leaveDeduction = 0;

let extraDeduction = 0;

  document.getElementById('salaryMonthText').textContent =
    `${MONTHS[month]} ${year}`;

  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const tbody = document.getElementById('attendanceTbody');

  tbody.innerHTML = '';


  for(let d = 1; d <= daysInMonth; d++){

    const date = new Date(year, month, d);

    const dow = date.getDay();

    const isSunday = dow === 0;

    const tr = document.createElement('tr');

    let leaveBadge = '';

    let timing = '';

    let perDay = '';

    let firstBreak = '';

    let lunchBreak = '';

    let secondBreak = '';

    let extraBreak = '';

const isSecondSaturday =
  dow === 6 && d > 7 && d <= 14;

const isFourthSaturday =
  dow === 6 && d > 21 && d <= 28;

const randomStatus = Math.floor(Math.random() * 5);

if(isSunday){

  leaveBadge = `
    <span class="inline-flex items-center justify-center px-3 py-1 rounded-xl text-[10px] font-bold bg-gray-100 text-gray-700 leading-tight text-center">
      Weekend Leave
    </span>
  `;

  timing = '-';

  firstBreak = '-';

  lunchBreak = '-';

  secondBreak = '-';

  extraBreak = '-';

  perDay = '—';

}
else if(isSecondSaturday || isFourthSaturday){

  leaveBadge = `
    <span class="inline-flex items-center justify-center px-3 py-1 rounded-xl text-[10px] font-bold bg-orange-100 text-orange-700 leading-tight text-center">
      2nd & 4th Saturday Half Day
    </span>
  `;

  timing = '09:00 AM - 02:00 PM';

  firstBreak = '10 Min';

  lunchBreak = '15 Min';

  secondBreak = '-';

  extraBreak = '0 Min';

  perDay = fmtINR((gross / 26) / 2);

}
else{

  timing = '09:00 AM - 06:00 PM';

  firstBreak = '10 Min';

  lunchBreak = '30 Min';

  secondBreak = '10 Min';

  extraBreak = '0 Min';

  perDay = fmtINR(gross / 26);

  if(randomStatus === 0){
totalLeaveDays++;

deductibleLeaves++;
    leaveBadge = `
      <span class="inline-flex items-center justify-center px-3 py-1 rounded-xl text-[10px] font-bold bg-red-100 text-red-700 leading-tight text-center">
        Leave Not Applied
      </span>
    `;

  }
  else if(randomStatus === 1){
totalLeaveDays++;

paidLeaves++;
    leaveBadge = `
      <span class="inline-flex items-center justify-center px-3 py-1 rounded-xl text-[10px] font-bold bg-blue-100 text-blue-700 leading-tight text-center">
        Leave Applied
      </span>
    `;

  }
  else if(randomStatus === 2){
paidLeaves++;
    leaveBadge = `
      <span class="inline-flex items-center justify-center px-3 py-1 rounded-xl text-[10px] font-bold bg-purple-100 text-purple-700 leading-tight text-center">
        Festival Leave By Company
      </span>
    `;

  }
  else{

    leaveBadge = `
      <span class="inline-flex items-center justify-center px-3 py-1 rounded-xl text-[10px] font-bold bg-green-100 text-green-700 leading-tight text-center">
        Present
      </span>
    `;

  }

}

    tr.innerHTML = `

      <td class="px-1 py-1.5 text-sm text-center border-b border-gray-100 whitespace-nowrap">
        ${String(d).padStart(2,'0')}
      </td>

      <td class="px-1 py-1.5 text-sm text-center border-b border-gray-100 whitespace-nowrap">
        ${timing}
      </td>

      <td class="px-1 py-1.5 text-sm text-center border-b border-gray-100 whitespace-nowrap">
        ${firstBreak}
      </td>

      <td class="px-1 py-1.5 text-sm text-center border-b border-gray-100 whitespace-nowrap">
        ${lunchBreak}
      </td>

      <td class="px-1 py-1.5 text-sm text-center border-b border-gray-100 whitespace-nowrap">
        ${secondBreak}
      </td>

      <td class="px-1 py-1.5 text-sm text-center border-b border-gray-100 whitespace-nowrap text-orange-500 font-semibold">
        ${extraBreak}
      </td>

      <td class="px-1 py-1.5 text-sm text-center border-b border-gray-100 whitespace-nowrap">
        ${DAYS[dow]}
      </td>

    <td class="px-2 py-2 text-xs text-center border-b border-gray-100">
      <div class="flex items-center justify-center">
        ${leaveBadge}
      </div>
    </td>

      <td class="px-1 py-1.5 text-sm text-center border-b border-gray-100 whitespace-nowrap font-medium">
        ${perDay}
      </td>

    `;

    tbody.appendChild(tr);
    const perDaySalary = gross / 26;

const deductibleLeaveCount =
  Math.max(0, deductibleLeaves - extraLeaveAllowed);

leaveDeduction =
  deductibleLeaveCount * perDaySalary;

const finalCalculatedSalary =
  gross - leaveDeduction - extraDeduction;

  }

const finalSalary = finalCalculatedSalary;

  document.getElementById('grossSalaryCard').textContent =
    fmtINR(gross);

  document.getElementById('finalSalaryCard').textContent =
    fmtINR(finalSalary);

  document.getElementById('leaveDeductionCard').textContent =
    fmtINR(leaveDeduction);

  document.getElementById('extraDeductionCard').textContent =
    fmtINR(extraDeduction);
    document.getElementById('totalLeaveDays').textContent =
  totalLeaveDays;

document.getElementById('extraLeaveAllowed').textContent =
  extraLeaveAllowed;

document.getElementById('paidLeaves').textContent =
  paidLeaves;

document.getElementById('deductibleLeaves').textContent =
  Math.max(0, deductibleLeaves - extraLeaveAllowed);
document.getElementById('breakdownGrossSalary').textContent =
  fmtINR(gross);

document.getElementById('breakdownPerDaySalary').textContent =
  fmtINR(perDaySalary);

document.getElementById('breakdownTotalLeave').textContent =
  totalLeaveDays;

document.getElementById('breakdownPaidLeaves').textContent =
  paidLeaves;

document.getElementById('breakdownDeductibleLeaves').textContent =
  deductibleLeaveCount;

document.getElementById('breakdownFinalSalary').textContent =
  fmtINR(finalSalary);

document.getElementById('breakdownExtraBreak').textContent =
  '0 Min';
}

monthSelect.addEventListener('change', regenerate);

yearSelect.addEventListener('change', regenerate);

regenerate();

</script>

</body>
</html>

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