<template>
  <div>
    <div class="row items-center q-mb-lg" style="gap: 8px">
      <span class="text-subtitle1 text-weight-medium"
        >Relatório de Presença</span
      >
    </div>

    <div v-for="course in courses" :key="course.id" class="q-mb-sm">
      <div
        class="row items-center q-px-md q-py-sm rounded-borders"
        style="border: 1px solid #e0e0e0; cursor: default"
      >
        <span class="col text-body2" style="color: #e8825a">{{
          course.name
        }}</span>
        <q-btn
          flat
          round
          dense
          :icon="
            expandedCourses.includes(course.id) ? 'mdi-eye' : 'mdi-eye-outline'
          "
          @click="toggleCourse(course.id)"
        />
      </div>

      <div v-if="expandedCourses.includes(course.id)">
        <q-markup-table flat bordered class="q-mt-xs">
          <thead>
            <tr>
              <th class="text-left">Item</th>
              <th class="text-left">Data</th>
              <th class="text-left">Status</th>
              <th class="text-right">Justificativa</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(record, index) in course.attendances" :key="index">
              <td>{{ record.item }}</td>
              <td>
                <q-badge
                  :label="record.date"
                  style="
                    background-color: #6ed4c8;
                    color: #fff;
                    font-size: 0.75rem;
                    padding: 4px 8px;
                    border-radius: 12px;
                  "
                />
              </td>
              <td>{{ record.status }}</td>
              <td class="text-right">{{ record.justification }}</td>
            </tr>
          </tbody>
        </q-markup-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const expandedCourses = ref([1]);

const courses = ref([
  {
    id: 1,
    name: "Inteligência extrema",
    attendances: [
      { item: 1, date: "15/02", status: "Presente", justification: "-" },
      { item: 2, date: "18/02", status: "Presente", justification: "-" },
      { item: 3, date: "20/02", status: "Ausente", justification: "Sim" },
      { item: 3, date: "20/02", status: "Ausente", justification: "Não" },
    ],
  },
  {
    id: 2,
    name: "Inteligência extrema II",
    attendances: [],
  },
  {
    id: 3,
    name: "Inteligência extrema III",
    attendances: [],
  },
]);

function toggleCourse(id) {
  const idx = expandedCourses.value.indexOf(id);
  if (idx === -1) {
    expandedCourses.value.push(id);
  } else {
    expandedCourses.value.splice(idx, 1);
  }
}
</script>
