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

    <div class="col-sm-3 text-center mas-title2">

        <label for="course_mode">課程模式</label>

    </div>

    <div class="col-sm-9 mas-box">

        <label class="mas-text">

            <span class="text block" name="course_mode">月費</span>

        </label>

    </div>

</div>



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

    <div class="col-sm-3 text-center mas-title2">

        <label for="course_mode">課程分鐘</label>

    </div>

    <div class="col-sm-9 mas-box">

        <label class="mas-text">

            <span class="text block" name="course_duration"><?php echo $duration; ?></span>

        </label>

    </div>

</div>



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

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

        <label for="date_from">開始日期 *</label>

    </div>

    <div class="col-sm-9 mas-box">

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

            <input class="form-control" type="text" id="date_from" name="date_from" value="<?php echo date('Y-m-d', $date_from); ?>">

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

                <span class="glyphicon glyphicon-calendar"></span>

            </span>

        </div>

    </div>

</div>



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

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

        <label for="date_to">結束日期 *</label>

    </div>

    <div class="col-sm-9 mas-box">

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

            <input class="form-control" type="text" id="date_to" name="date_to" value="<?php echo date('Y-m-d', $date_to); ?>">

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

                <span class="glyphicon glyphicon-calendar"></span>

            </span>

        </div>

    </div>

</div>



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

    <div class="col-sm-3 text-center mas-title"><label for="weekdays">課程日</label></div>

    <div class="col-sm-9 mas-box">

        <table class="weekday-list-container">

            <thead>

                <tr>

                    <th>日</th>

                    <th>一</th>

                    <th>二</th>

                    <th>三</th>

                    <th>四</th>

                    <th>五</th>

                    <th>六</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <?php
                    foreach ($default_weekdays as $_index => $_weekdays)
                        if (array_key_exists($_index, $weekdays)) {

                            echo '<td><input type="time" name="' . $_weekdays . '" placeholder="時間"

                            min="09:00" max="20:00" autocomplete="off" style="background-color: rgb(255, 255, 255);cursor:default;padding:6px 0;" value="' . $weekdays[$_index] . '" />';
                        } else {

                            echo '<td><input type="time" name="' . $_weekdays . '" placeholder="時間"

                            min="09:00" max="20:00" autocomplete="off" style="background-color: rgb(255, 255, 255);cursor:default;padding:6px 0;" />';
                        }
                    ?>

                </tr>

            </tbody>

        </table>

    </div>

</div>



<div id="listing_month_dates_html"></div>



<div style="margin-bottom: 15px;"></div>



<a class="btn btn-footer listing_month_dates">列出所有時段</a>



<div style="margin-bottom: 15px;"></div>



<script>
    const _this = $('#selected_month').parent();

    const format = _this.is('[format]') ? _this.attr('format') : 'YYYY-MM-DD HH:mm';



    _this.datetimepicker({

        format: format,

        locale: moment.locale('zh-hk'),

    });



    _this.find('input').on('click', () => {

        _this.next().trigger('click');

    });


    var listdates = false;
    $(document).on('click', '.listing_month_dates', function() {
        if (listdates) {
            $('#listing_month_dates_html').empty();
            $(this).text('列出所有時段');
            listdates = false;
        } else {
            $('#listing_month_dates_html').empty();

            $('.weekday-list-container input').removeAttr('readonly');

            let arr = $('#form').serializeArray();



            if ($('.weekday-container [name="weekday-sun"]').is(":not(:checked)"))
                arr.push({

                    name: 'weekday-sun-time',

                    value: ''

                });

            if ($('.weekday-container [name="weekday-mon"]').is(":not(:checked)"))
                arr.push({

                    name: 'weekday-mon-time',

                    value: ''

                });

            if ($('.weekday-container [name="weekday-tue"]').is(":not(:checked)"))
                arr.push({

                    name: 'weekday-tue-time',

                    value: ''

                });

            if ($('.weekday-container [name="weekday-wed"]').is(":not(:checked)"))
                arr.push({

                    name: 'weekday-wed-time',

                    value: ''

                });

            if ($('.weekday-container [name="weekday-thu"]').is(":not(:checked)"))
                arr.push({

                    name: 'weekday-thu-time',

                    value: ''

                });

            if ($('.weekday-container [name="weekday-fri"]').is(":not(:checked)"))
                arr.push({

                    name: 'weekday-fri-time',

                    value: ''

                });

            if ($('.weekday-container [name="weekday-sat"]').is(":not(:checked)"))
                arr.push({

                    name: 'weekday-sat-time',

                    value: ''

                });



            console.log(arr);

            $.ajax({

                url: '/api/event/listing_month_dates',

                method: 'post',

                data: arr,

                dataType: 'json',

                success: function(response) {

                    $('.weekday-list-container input').attr('readonly', 'readonly');

                    if (response !== null) {
                        $('#listing_month_dates_html').append(response['data']['result']);
                        $('.listing_month_dates').text('收起所有時段');
                        listdates = true;
                    }
                }
            });
        }
    });
</script>