---
import ReimbursementForm from "./reimbursement/ReimbursementForm";
import ReimbursementList from "./reimbursement/ReimbursementList";
---

<div class="space-y-6">
  <div class="mb-6">
    <h2 class="text-2xl font-bold">Reimbursement</h2>
    <p class="opacity-70">Manage your reimbursement requests</p>
  </div>

  <div class="tabs tabs-boxed">
    <button class="tab tab-active" data-tab="list">My Requests</button>
    <button class="tab" data-tab="form">New Request</button>
  </div>

  <div id="reimbursementContent">
    <div id="listTab" class="tab-content block">
      <ReimbursementList client:load />
    </div>
    <div id="formTab" class="tab-content hidden">
      <div class="card bg-base-100 shadow-xl border border-base-200">
        <div class="card-body">
          <ReimbursementForm client:load />
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // Tab switching logic
  const tabs = document.querySelectorAll(".tab");
  const tabContents = document.querySelectorAll(".tab-content");

  tabs.forEach((tab) => {
    tab.addEventListener("click", () => {
      const targetTab = tab.getAttribute("data-tab");

      // Update tab states
      tabs.forEach((t) => t.classList.remove("tab-active"));
      tab.classList.add("tab-active");

      // Update content visibility
      tabContents.forEach((content) => {
        if (content.id === `${targetTab}Tab`) {
          content.classList.remove("hidden");
          content.classList.add("block");
        } else {
          content.classList.remove("block");
          content.classList.add("hidden");
        }
      });
    });
  });
</script>