<?php $defaultThreshold = 4; ?>

<?php $defaultDate = $date; ?>

<?php $defaultTime = $time; ?>

<script>

    var defaultAdjustDate = "<?php echo $defaultDate; ?>";

    var defaultAdjustTime = "<?php echo $defaultTime; ?>";

</script>

<div class="form-group mas-col">

    <div class="col-xs-3 text-center mas-title">

        <label for="weekdays">課程日</label>

    </div>

    <div class="col-xs-9 mas-box" style="background: white;">

        <?php if (isset($__nonRegularTimeslots) && !empty($__nonRegularTimeslots)) : ?>

            <?php for ($i = 1; $i <= 12; $i++) : ?>

                <?php $hasTimeslot = count($__nonRegularTimeslots); ?>

                <?php $temp = $hasTimeslot ? array_shift($__nonRegularTimeslots) : []; ?>

                <?php // EXISTING Timeslot Information to be put 

                ?>

                <?php $id = $hasTimeslot ? $temp['id'] : ''; ?>

                <?php $date = $hasTimeslot ? date('Y-m-d', $temp['startdate']) : ($i > $defaultThreshold  ? '' : $defaultDate); ?>

                <?php $time = $hasTimeslot ? date('Y-m-d', $temp['starttime']) : ($i > $defaultThreshold  ? '' : $defaultTime); ?>

                <div class="non-regular">

                    <input type="hidden" name="L[<?php echo $i; ?>][id]" value="<?php echo $id; ?>">

                    <div class="col-xs-1 mas-box" style="text-align: center; padding: 10px;"><?php echo $i; ?></div>

                    <div class="col-xs-11" style="padding: 0;">

                        <div class="col-xs-6 mas-box">

                            <div class="input-group clickable" datetimepicker format="YYYY-MM-DD">

                                <input class="form-control" type="text" name="L[<?php echo $i; ?>][date]" value="<?php echo $date_from; ?>">

                                <span class="input-group-addon">

                                    <a><i class="fa fa-calendar"></i></a>

                                </span>

                            </div>

                        </div>

                        <div class="col-xs-6 mas-box">

                            <div class="input-group clickable">

                                <input class="form-control" type="text" name="L[<?php echo $i; ?>][time]" value="<?php echo $time; ?>" autocomplete="off" timepicker>

                                <a><i class="fa fa-calendar"></i></a>

                            </div>

                        </div>

                    </div>

                </div>

            <?php endfor; ?>

        <?php else : ?>

            <?php for ($i = 1; $i <= 12; $i++) : ?>

                <?php // DEFAULT Timeslot Information to be put, i.e. No Timeslots 

                ?>

                <?php $id = ''; ?>

                <?php $date = $i > $defaultThreshold  ? '' : $defaultDate; ?>

                <?php $time = $i > $defaultThreshold  ? '' : $defaultTime; ?>

                <div class="non-regular">

                    <div class="col-xs-1 mas-box" style="text-align: center; padding: 10px;"><?php echo $i; ?></div>

                    <div class="col-xs-11" style="padding: 0;">

                        <div class="col-xs-6 mas-box">

                            <div class="input-group clickable" datetimepicker format="YYYY-MM-DD">

                                <input class="form-control" type="text" name="L[<?php echo $i; ?>][date]" value="<?php echo $date; ?>">

                                <span class="input-group-addon">

                                    <a><i class="fa fa-calendar"></i></a>

                                </span>

                            </div>

                        </div>

                        <div class="col-xs-6 mas-box">

                            <div class="input-group clickable">

                                <input class="form-control" type="text" name="L[<?php echo $i; ?>][time]" value="<?php echo $time; ?>" autocomplete="off" timepicker>

                                <a><i class="fa fa-calendar"></i></a>

                            </div>

                        </div>

                    </div>

                </div>

            <?php endfor; ?>

        <?php endif; ?>

        <div id="adjust"></div>

        <div id="adjust-buttons" class="non-regular">

            <div class="col-xs-1"></div>

            <div class="col-xs-11" style="padding: 0;">

                <button type="button" class="btn spinbox-up purple" style="width: 49%;padding: 6px;left: 6px;border: 1px solid #f7d5d6;outline: none;">

                    <i class="fa fa-plus"></i> 課堂

                </button>

                <button type="button" class="btn spinbox-down blueberry" style="width: 49%;padding: 6px;left: 4px;border: 1px solid #f7d5d6;outline: none;" disabled>

                    <i class="fa fa-minus"></i> 課堂

                </button>

            </div>

        </div>

    </div>

    <script>

        const defaultAdjustSum = 12;

        let currentAdjustSum = defaultAdjustSum;

        $('#adjust-buttons .spinbox-up').on('click', function() {

            currentAdjustSum++;

            $('#adjust').append(`

                <div class="non-regular">

                    <div class="col-xs-1 mas-box" style="text-align: center; padding: 10px;">${currentAdjustSum}</div>

                    <div class="col-xs-11" style="padding: 0;">

                        <div class="col-xs-6 mas-box">

                            <div class="input-group clickable" datetimepicker format="YYYY-MM-DD">

                                <input class="form-control" type="text" name="L[${currentAdjustSum}][date]" value="${defaultAdjustDate}">

                                <span class="input-group-addon">

                                    <a><i class="fa fa-calendar"></i></a>

                                </span>

                            </div>

                        </div>

                        <div class="col-xs-6 mas-box">

                            <div class="input-group clickable">

                                <input class="form-control" type="text" name="L[${currentAdjustSum}][time]" value="${defaultAdjustTime}" autocomplete="off" timepicker>

                                <a><i class="fa fa-calendar"></i></a>

                            </div>

                        </div>

                    </div>

                </div>

            `);

            $('#adjust-buttons .spinbox-down').removeAttr('disabled');

            dispatchEvent(new Event('load'));

        });

        $('#adjust-buttons .spinbox-down').on('click', function() {

            currentAdjustSum--;

            $('#adjust .non-regular:last-child').remove();

            if (currentAdjustSum == defaultAdjustSum) {

                $('#adjust-buttons .spinbox-down').attr('disabled', 'disabled');

            }

        });

        dispatchEvent(new Event('load'));

    </script>

</div>

<style>

    .input-group-addon {

        background: transparent;

        border: none;

        position: absolute;

        height: 100%;

        right: 0;

        z-index: 100;

        padding-left: 20px;

    }

</style>