@extends('manager.layout.master')

@section('body')
    <blockquote class="layui-elem-quote">添加章节</blockquote>
    <form class="layui-form" action="" method="post" id="form">
        <input type="hidden" name="course_id" value="{{$course_id}}">
        <div class="layui-form-item">
            <label class="layui-form-label">所属课程</label>
            <div class="layui-input-block">
                <select name="course_id" lay-search lay-verify="required">
                    @foreach($courses as $c)
                        <option value="{{$c->id}}" @if($c->id==$course_id) selected @endif>{{$c->title}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">章节标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" placeholder="请输入章节标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">章节类型</label>
            <div class="layui-input-block">
                @foreach($typeList as $k=>$v)
                    <input type="radio" name="type" value="{{$k}}" title="{{$v}}" @if($k==1) checked @endif class="type-radio">
                @endforeach
            </div>
        </div>
        <div class="layui-form-item field-content">
            <label class="layui-form-label">图文内容</label>
            <div class="layui-input-block">
                <textarea name="content" placeholder="图文学习内容（支持HTML）" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item field-video" style="display:none;">
            <label class="layui-form-label">录播视频地址</label>
            <div class="layui-input-block">
                <input type="text" name="video_url" placeholder="录播视频URL（占位/真实地址）" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item field-live" style="display:none;">
            <label class="layui-form-label">直播地址</label>
            <div class="layui-input-block">
                <input type="text" name="live_url" placeholder="直播推流/播放地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item field-live" style="display:none;">
            <label class="layui-form-label">直播开始</label>
            <div class="layui-input-block">
                <input type="text" name="live_start_time" placeholder="如 2026-07-25 14:00:00" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item field-live" style="display:none;">
            <label class="layui-form-label">直播结束</label>
            <div class="layui-input-block">
                <input type="text" name="live_end_time" placeholder="如 2026-07-25 16:00:00" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">本章学时</label>
            <div class="layui-input-block">
                <input type="number" step="0.5" name="hours" value="0.5" class="layui-input" style="width:160px;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="正常" checked>
                <input type="radio" name="status" value="2" title="禁用">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submit">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
@stop

@section('js')
    <script>
        layui.use(['form', 'jquery'], function () {
            var form = layui.form, $ = layui.jquery;
            function toggleFields() {
                var t = $('input[name=type]:checked').val();
                $('.field-content').toggle(t == '1');
                $('.field-video').toggle(t == '2');
                $('.field-live').toggle(t == '3');
            }
            toggleFields();
            form.on('radio(type)', function () { toggleFields(); });
            form.on('submit(submit)', function (data) {
                $.ajax({
                    type: 'post',
                    url: '{{route('chapterAdd')}}',
                    data: data.field,
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 1) {
                            layer.msg(res.message, {icon: 1, time: 1200}, function () {
                                parent.location.reload();
                            });
                        } else {
                            layer.msg(res.message, {icon: 0});
                        }
                    }
                });
                return false;
            });
        });
    </script>
@stop