{template "install/header.html"}

<style>
    .install-option-group {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        padding: 6px;
        border: 1px solid #e4ebf3;
        border-radius: 12px;
        background: linear-gradient(180deg, #f8fbff 0%, #f3f7fb 100%);
    }

    /* 覆盖框架 .mt-radio 默认样式，避免圆点压住文字 */
    .install-option-group .install-option-card.mt-radio {
        position: relative;
        display: inline-flex;
        align-items: center;
        min-width: 118px;
        margin: 0 0 0 0 !important;
        padding: 10px 18px 10px 40px !important;
        border: 1px solid #d7e3f0;
        border-radius: 10px;
        background: #fff;
        color: #4a5568;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .install-option-group .install-option-card.mt-radio:hover {
        border-color: #8db7e3;
        box-shadow: 0 6px 18px rgba(56, 110, 171, 0.10);
    }

    .install-option-group .install-option-card.mt-radio > input[type="radio"] {
        position: absolute;
        left: 14px;
        top: 50%;
        margin: -8px 0 0 0;
        width: 16px;
        height: 16px;
        opacity: 0;
        z-index: 1;
        cursor: pointer;
    }

    .install-option-group .install-option-card.mt-radio > span {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: 16px !important;
        height: 16px !important;
        margin: -8px 0 0 0 !important;
        padding: 0 !important;
        border: 2px solid #b8c7d9 !important;
        border-radius: 50% !important;
        background: #fff !important;
        box-shadow: none;
        transition: all 0.2s ease;
    }

    .install-option-group .install-option-card.mt-radio > span:after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 6px !important;
        height: 6px !important;
        margin: -3px 0 0 -3px !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #26a65b !important;
        opacity: 0;
        transform: scale(0.6);
        transition: all 0.2s ease;
    }

    .install-option-group .install-option-card.mt-radio > input[type="radio"]:checked + span {
        border-color: #26a65b !important;
        box-shadow: 0 0 0 4px rgba(38, 166, 91, 0.10);
    }

    .install-option-group .install-option-card.mt-radio > input[type="radio"]:checked + span:after {
        opacity: 1;
        transform: scale(1);
    }

    .install-option-group .install-option-card.mt-radio:has(input[type="radio"]:checked) {
        border-color: #26a65b;
        background: #f4fcf7;
        color: #1d7f45;
        box-shadow: 0 10px 22px rgba(38, 166, 91, 0.12);
    }

    .install-option-group .install-option-card.mt-radio.is-disabled,
    .install-option-group .install-option-card.mt-radio:has(input[type="radio"]:disabled) {
        opacity: .55;
        cursor: pointer;
        box-shadow: none;
        color: #8a96a6;
        background: #f5f7fa;
    }

    .install-option-group .install-option-card.mt-radio.is-disabled:hover {
        border-color: #c5d0dc;
        box-shadow: none;
    }

    .install-option-group .install-option-card.mt-radio.is-disabled > input[type="radio"] {
        pointer-events: none;
    }

    .install-option-help {
        margin: 12px 0 0;
        padding: 10px 14px;
        border-radius: 8px;
        background: #f8fbff;
        color: #6b7a8c;
        line-height: 1.8;
    }

    @media (max-width: 767px) {
        .install-option-group {
            display: flex;
        }

        .install-option-group .install-option-card.mt-radio {
            width: 100%;
            min-width: 0;
        }
    }
</style>

<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-edit font-green"></i>
            <span class="caption-subject font-green">{dr_lang('项目信息')}</span>
        </div>
    </div>
    <div class="portlet-body ">
            <form action="#" id="myform" class="form-horizontal form-bordered ">
                {dr_form_hidden()}
                <div class="form-body">
                    <div class="form-group">
                        <label class="control-label col-md-3">{dr_lang('项目地址')}</label>
                        <div class="col-md-7">
                            <p class="form-control-static" id="url"> {FC_NOW_HOST} </p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">{dr_lang('项目名称')}</label>
                        <div class="col-md-7">
                            <input type="text" name="data[name]" value="{dr_lang('我的项目')}" class="form-control" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">{dr_lang('创始人邮箱')}</label>
                        <div class="col-md-7">
                            <input type="text" name="data[email]" value="admin@admin.com" class="form-control" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">{dr_lang('创始人账号')}</label>
                        <div class="col-md-7">
                            <input type="text" name="data[username]" value="admin" class="form-control" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">{dr_lang('创始人密码')}</label>
                        <div class="col-md-7">
                            <input type="text" name="data[password]" value="admin" class="form-control" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">{dr_lang('数据库驱动')}</label>
                        <div class="col-md-7">
                            <div class="install-option-group mt-radio-inline">
                                {loop $db_drivers $d}
                                <label class="install-option-card mt-radio {if !$d.enabled}is-disabled js-db-driver-disabled{/if}"
                                       {if !$d.enabled}data-tip="{$d.tip}"{/if}>
                                    <input type="radio" name="data[db_driver]" value="{$d.name}" data-form="{$d.form}"
                                           {if $db_driver==$d.name && $d.enabled}checked{/if}
                                           {if !$d.enabled}disabled{/if}>
                                    <span></span>
                                    {$d.label}
                                </label>
                                {/loop}
                            </div>
                            {if $db_dir_missing || $force_mysqli}
                            <p class="help-block install-option-help">
                                {if $db_dir_missing}
                                <span style="color:#d68910;">{dr_lang('未检测到 System/Database 目录，已默认使用 MySQLi（MySQL）模式')}</span>
                                {elseif $force_mysqli}
                                <span style="color:#d68910;">{dr_lang('检测到自定义 Install.sql，仅支持 MySQLi 安装')}</span>
                                {/if}
                            </p>
                            {/if}
                        </div>
                    </div>
                    <div class="form-group js-db-server">
                        <label class="control-label col-md-3">{dr_lang('数据库地址')}</label>
                        <div class="col-md-7">
                            <input type="text" name="data[db_host]" value="{$db_host}" class="form-control" placeholder="">
                        </div>
                    </div>
                    <div class="form-group js-db-server">
                        <label class="control-label col-md-3">{dr_lang('数据库账号')}</label>
                        <div class="col-md-7">
                            <input type="text" name="data[db_user]" value="{$db_user}" class="form-control" placeholder="">
                        </div>
                    </div>
                    <div class="form-group js-db-server">
                        <label class="control-label col-md-3">{dr_lang('数据库密码')}</label>
                        <div class="col-md-7">
                            <input type="text" name="data[db_pass]" value="{$db_pass}" class="form-control js-db-pass" placeholder="">
                        </div>
                    </div>
                    <div class="form-group js-db-server">
                        <label class="control-label col-md-3">{dr_lang('数据库名称')}</label>
                        <div class="col-md-7">
                            <input type="text" name="data[db_name]" value="{$db_name}" class="form-control js-db-name-mysql" placeholder="">
                            <p class="help-block"> {dr_lang('当提示Unknown database时，请先创建数据库后再进行下一步')} </p>
                        </div>
                    </div>
                    <div class="form-group js-db-sqlite" style="display:none;">
                        <label class="control-label col-md-3">{dr_lang('数据库文件')}</label>
                        <div class="col-md-7">
                            <input type="text" name="data[db_name_sqlite]" value="{$sqlite_name}" class="form-control js-db-name-sqlite" placeholder="database/SQLite3/" readonly>
                            <p class="help-block"> {dr_lang('保存在 cache/database/SQLite3/ 下，文件名安装时随机生成，避免路径被猜测')} </p>
                        </div>
                    </div>
                    <div class="form-group js-db-sqlite" style="display:none;">
                        <label class="control-label col-md-3">{dr_lang('加密密码')}</label>
                        <div class="col-md-7">
                            <input type="text" name="data[db_pass_sqlite]" value="" class="form-control js-db-pass-sqlite" placeholder="{dr_lang('可选，一般留空')}">
                            <p class="help-block"> {dr_lang('可选。若填写则作为 SQLite 加密口令（需 PHP 支持）')} </p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">{dr_lang('数据表前缀')}</label>
                        <div class="col-md-7">
                            <input type="text" name="data[db_prefix]" value="{$db_prefix}" class="form-control" placeholder="">
                        </div>
                    </div>
                    {if $is_demo}
                    <div class="form-group">
                        <label class="control-label col-md-3">{dr_lang('安装测试数据')}</label>
                        <div class="col-md-7">
                            <div class="mt-radio-inline ">
                                <label class="mt-radio">
                                    <input type="radio" name="is_install_db" value="1" checked=""> {dr_lang('安装')}
                                    <span></span>
                                </label>
                                <label class="mt-radio">
                                    <input type="radio" name="is_install_db" value="0"> {dr_lang('不安装')}
                                    <span></span>
                                </label>
                            </div>
                            <p class="help-block install-option-help"> {dr_lang('新手建议选择安装测试数据，方便快速入门')} </p>
                        </div>
                    </div>
                    {/if}
                </div>

            </form>
    </div>
    <div class="portlet-title" style="min-height: 18px;"></div>
    <div class="portlet-body text-center">
        <a href="javascript:dr_next_install();" type='submit' class="btn btn-success"> {dr_lang('下一步安装')} </a>
    </div>
    <div class="portlet-body text-center" id="dr_loading" style="display: none; color:blue;">
        {dr_lang('正在安装中（这个过程一般不超过30秒）')}...
    </div>
</div>
<script>
    $('#url').html(document.location.protocol+'//{DOMAIN_NAME}/');

    function dr_toggle_db_driver() {
        var $checked = $('input[name="data[db_driver]"]:checked:not(:disabled)');
        if (!$checked.length) {
            $checked = $('input[name="data[db_driver]"]:not(:disabled)').first().prop('checked', true);
        }
        var formType = $checked.attr('data-form') || 'server';
        if (formType === 'sqlite') {
            $('.js-db-server').hide().find('input,select,textarea').prop('disabled', true);
            $('.js-db-sqlite').show().find('input,select,textarea').prop('disabled', false);
            $('.js-db-name-sqlite').attr('name', 'data[db_name]');
            $('.js-db-pass-sqlite').attr('name', 'data[db_pass]');
        } else {
            $('.js-db-sqlite').hide().find('input,select,textarea').prop('disabled', true);
            $('.js-db-server').show().find('input,select,textarea').prop('disabled', false);
            $('.js-db-name-sqlite').attr('name', 'data[db_name_sqlite]');
            $('.js-db-pass-sqlite').attr('name', 'data[db_pass_sqlite]');
        }
    }

    $(function () {
        // 若默认驱动不可用则自动切换
        var $checked = $('input[name="data[db_driver]"]:checked');
        if ($checked.length && $checked.prop('disabled')) {
            $('input[name="data[db_driver]"]:not(:disabled)').first().prop('checked', true);
        }
        dr_toggle_db_driver();
        $('input[name="data[db_driver]"]').on('change', dr_toggle_db_driver);

        // 灰色不可用驱动：点击弹窗提示原因
        $(document).on('click', '.js-db-driver-disabled', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var tip = $(this).attr('data-tip') || '{dr_lang("该数据库驱动暂不可选")}';
            if (typeof layer !== 'undefined' && layer.alert) {
                layer.alert(tip);
            } else if (typeof dr_tips === 'function') {
                dr_tips(0, tip);
            } else {
                alert(tip);
            }
            return false;
        });
    });

    function dr_next_install() {
        var loading = layer.load(2, {
            shade: [0.3,'#fff'], //0.1透明度的白色背景
            time: 100000000
        });
        $('#dr_loading').show();
        $.ajax({type: "POST",dataType:"json", url: '{$do_url}', data: $("#myform").serialize(),
            success: function(json) {
                if (json.code == 1) {
                    window.location.href = json.msg;
                } else {
                    layer.close(loading);
                    layer.alert(json.msg);
					$('#dr_loading').hide();
                }
            },
            error: function(HttpRequest, ajaxOptions, thrownError) {
                layer.closeAll('loading');
                $('#dr_loading').hide();
                layer.open({
                    type: 1,
                    title: "{dr_lang('系统故障')}",
                    fix:true,
                    shadeClose: true,
                    shade: 0,
                    area: ['50%', '50%'],
                    content: "<div style=\"padding:10px;\">"+HttpRequest.responseText+"</div>"
                });
            }
        });
    }
</script>
{template "install/footer.html"}