<table id="event-timeslot-table" class="table datatables" style="text-align:left">
    <thead>
        <tr>
            <th><input class="checkbox-check-all" type="checkbox" style="position: relative; left: 20px; opacity: 1; background-color: rgb(253, 234, 236);"></th>
            <th>課堂日期</th>
            <th>開始時間</th>
            <th>結束時間</th>
            <th>假期 skip</th>
        </tr>
    </thead>
    <tbody>
        <?php

        use app\libraries\DateHelper;

        foreach ($items as $item) : ?>
            <?php $weekday = strtolower(DateHelper::getDefaultWeekdays($item['startdateTimestamp'])); ?>
            <tr data-id="<?php echo $item['id']; ?>" data-date="<?php echo $item['startdate'] ?>">
                <td class="<?php echo $weekday; ?>">
                    <?php if (!$item['holiday_skip']) : ?>
                        <input class="checkbox-check" type="checkbox" <?php if ($checked['weekday-' . $weekday]) echo 'checked'; ?> style="position: relative; left: 20px; opacity: 1; background-color: rgb(253, 234, 236);">
                    <?php endif; ?>
                </td>
                <td><?php echo $item['startdate'] . sprintf(' (%s)', \app\libraries\DateHelper::getDefaultTcWeekdays($item['startdateTimestamp'])); ?></td>
                <td><?php echo $item['holiday_skip'] ? '一' : $item['starttime']; ?></td>
                <td><?php echo $item['holiday_skip'] ? '一' : $item['endtime']; ?></td>
                <td><?php echo $item['holiday_skip'] ?></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

<script>
    $(".checkbox-check-all").change(function() {
        if ($(this).is(":checked")) {
            $(".checkbox-check:checkbox").prop("checked", true);
        } else {
            $(".checkbox-check:checkbox").prop("checked", false);
        }
    });
    $(".checkbox-check").change(e => {
        const _this = $(e.currentTarget);

        if (!_this.is(":checked")) {
            $(".checkbox-check-all:checkbox").prop("checked", false);
        }
    });
</script>