<link rel="stylesheet" type="text/css" href="/static/css/event-manage.css" />

<div id="page-event-manage">
    <?php /** $__pathname, $__eventId, $__timeslotId from controller, will then be used inside this partial*/ ?>
    <?php include(__DIR__ . '/partials/topbar.php'); ?>
    <div class="form-container">
        <form id="form" class="form-horizontal initialized" role="form" method="post" action="<?php echo __url($__pathname, $__eventId, $__timeslotId); ?>">
            <div class="title"><?php echo $title; ?></div>
            <?php if (isset($__alert_failure_message)) : ?>
                <div class="alert alert-danger" role="alert" style="text-align: left;">
                    <?php echo $__alert_failure_message; ?><button type="button" class="close" data-dismiss="alert" aria-label="Close"><a aria-hidden="true">×</a></button>
                </div>
            <?php endif; ?>
            <ul class="table-toolbar" style="text-align: left;">
                <li>
                    <a class="toolbar-element btn btn-default btn-create" href="/event?date=<?php echo $date; ?>">
                        <i class="fa fa-reply" style="margin-right: 8px;"></i>返回
                    </a>
                </li>
            </ul>
            <input type="hidden" value="c" name="mode">
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title"><label for="course_category_id">課程主分類 *</label></div>
                <div class="col-sm-9 mas-box">
                    <select id="course_category_id" name="course_category_id" style="width: 100%" select2>
                        <option value="-1">-- 請選擇課程主分類 --</option>
                        <?php foreach ($courseCategories as $k => $v) : ?>
                            <?php
                            echo sprintf(
                                '<option value="%s"%s>%s</option>',
                                $v['id'],
                                $v['id'] == $course_category_id ? ' selected' : '',
                                $v['name']
                            );

                            ?>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title"><label for="course_subcategory_id">課程次分類 *</label></div>
                <div class="col-sm-9 mas-box">
                    <select id="course_subcategory_id" name="course_subcategory_id" style="width: 100%" select2>
                        <option value="-1">-- 請選擇課程次分類 --</option>
                        <?php foreach ($courseSubCategories as $k => $v) : ?>
                            <?php
                            echo sprintf(
                                '<option value="%s"%s>%s</option>',
                                $v['id'],
                                $v['id'] == $course_category_sub_id ? ' selected' : '',
                                $v['name']
                            );
                            ?>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title"><label for="course_id">課程名稱 *</label></div>
                <div class="col-sm-9 mas-box">
                    <select id="course_id" name="course_id" style="width: 100%" select2>
                        <option value="-1">-- 請選擇課程名稱 --</option>

                        <?php foreach ($courses as $k => $v) : ?>
                            <?php
                            echo sprintf(
                                '<option value="%s"%s>%s</option>',
                                $v['id'],
                                $v['id'] == $course_id ? ' selected' : '',
                                $v['name']
                            );
                            ?>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div id="detail_html">
                <?php echo $detail; ?>
            </div>
            <div id="mode_html"></div>
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title">
                    <label for="display_name">時段名稱</label>
                </div>
                <div class="col-sm-9 mas-box">
                    <input id="student_phone" type="text" class="form-control mas-input" name="display_name" style="" value="<?php echo $display_name; ?>">
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title">
                    <label for="room_id">課室 *</label>
                </div>
                <div class="col-sm-9 mas-box">
                    <select id="room_id" name="room_id" style="width: 100%" select2>
                        <option value="-1">-- 請選擇課室 --</option>
                        <?php foreach ($rooms as $k => $v) : ?>
                            <?php
                            echo sprintf(
                                '<option value="%s"%s>%s</option>',
                                $v['id'],
                                $v['id'] == $room_id ? ' selected' : '',
                                $v['name']
                            );
                            ?>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>

            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title"><label for="s2id_autogen4">教師(主教)*</label></div>
                <div class="col-sm-9 mas-box">
                    <select id="pic_1" name="pic_1" style="width: 100%" select2>
                        <option value="-1">-- 請選擇教師(主教) --</option>
                        <?php foreach ($teachers as $k => $v) : ?>
                            <?php
                            $name = $v['chi_name'] ?? sprintf('%s %s', $v['eng_firstname'], $v['eng_lastname']);
                            echo sprintf(
                                '<option value="%s"%s>%s</option>',
                                $v['id'],
                                $v['id'] == $pic_1 ? ' selected' : '',
                                $name

                            );
                            ?>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title"><label for="s2id_autogen2">教師(助教)</label></div>
                <div class="col-sm-9 mas-box">
                    <select id="pic_2" name="pic_2" style="width: 100%" select2>
                        <option value="-1">-- 請選擇教師(助教) --</option>
                        <?php foreach ($teachers as $k => $v) : ?>
                            <?php
                            $name = $v['chi_name'] ?? sprintf('%s %s', $v['eng_firstname'], $v['eng_lastname']);
                            echo sprintf(
                                '<option value="%s"%s>%s</option>',
                                $v['id'],
                                $v['id'] == $pic_2 ? ' selected' : '',
                                $name
                            );
                            ?>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-3 text-center mas-title"><label for="remark">備註</label></div>
                <div class="col-sm-9 mas-box"><textarea id="remark" class="form-control mas-textarea" rows="3" name="remark" placeholder="輸入備註" style=""><?= $remark ?></textarea></div>
            </div>
            <div class="form-footer">
                <a class="btn btn-footer cancel" href="javascript:window.location.reload(true)">重設</a>
                <input type="submit" class="btn btn-footer submit" value="儲存" />
                <?php /** Since there is a modal, submit button has been moved to the modal.*/ ?>                
            </div>
        </form>
    </div>
</div>

<script>
    $(document).ready(function() {
        var li = $('#sidebar-menu li').filter(function(i) {
            return $(this).find('.menu-dropdown').find('.menu-text').text() === '時間表';
        });
        li.addClass('active open');
    });

    $('#course_category_id').on('change', function() {
        $('#course_subcategory_id').empty().append('<option value="-1">-- 請選擇課程次分類 --</option>');
        $('#course_id').empty().append('<option value="-1">-- 請選擇課程名稱 --</option>');

        var course_category_id = $(this).val().trim();
        $.ajax({
            url: '/api/event/course_subcategory',
            method: 'get',
            data: {
                course_category_id: course_category_id
            },
            dataType: 'json',
            success: function(response) {
                if (response !== null) {
                    $.each(response['data']['result'], function(i, v) {
                        console.log(v);
                        $('#course_subcategory_id').append('<option value="' + v.id + '">' + v.name + '</option>');
                    });
                }
            }
        });
    });

    $('#course_subcategory_id').on('change', function() {
        $('#course_id').empty().append('<option value="-1">-- 請選擇課程名稱 --</option>');

        var course_subcategory_id = $(this).val().trim();
        $.ajax({
            url: '/api/event/course',
            method: 'get',
            data: {
                course_category_id: $('#course_category_id').val().trim(),
                course_subcategory_id: course_subcategory_id
            },
            dataType: 'json',
            success: function(response) {
                if (response !== null) {
                    $.each(response['data']['result'], function(i, v) {
                        $('#course_id').append(`<option value="${v.id}">${v.name}</option>`);
                    });
                }
            }
        });
    });

    $('#course_id').on('change', function() {
        $('#detail_html').empty();
        $('#mode_html').empty();
        const id = $(this).val().trim();
        const url = new URL(window.location.href);
        const args = new URLSearchParams(url.search);
        console.log(args.get('date'));
        $.ajax({
            url: '/api/event/course_detail',
            method: 'get',
            data: {
                id: id,
                date: args.get('date'),
                time: args.get('time')
            },
            dataType: 'json',
            success: function(response) {
                if (response !== null) {
                    $('#detail_html').append(response['data']['result']['detail_html']);
                    $('#mode_html').append(response['data']['result']['mode_html']);
                    dispatchEvent(new Event('load'));
                }
            }
        });
    });

    $('#course_category_id').on('change', function() {
        $('#course_subcategory_id').empty().append('<option value="-1">-- 請選擇課程次分類 --</option>');
        $('#course_id').empty().append('<option value="-1">-- 請選擇課程名稱 --</option>');

        var course_category_id = $(this).val().trim();
        $.ajax({
            url: '/api/event/course_subcategory',
            method: 'get',
            data: {
                course_category_id: course_category_id
            },
            dataType: 'json',
            success: function(response) {
                if (response !== null) {
                    $.each(response['data']['result'], function(i, v) {
                        console.log(v);
                        $('#course_subcategory_id').append('<option value="' + v.id + '">' + v.name + '</option>');
                    });
                }
            }
        });
    });
</script>
