{include file="public/head"}
<style>

    /* ---- Card ---- */
    .lookup-card{
        background:#fff;
        border:1px solid rgba(0,0,0,.06);
        box-shadow: 0 2px 10px rgba(0,0,0,.06);
        border-radius: 6px;
        margin: 18px 0 26px;
        overflow:hidden;
        max-width: 100%;
    }
    .lookup-bar{
        background: var(--main-color);
        color:#fff;
        font-size: 24px;
        font-weight: 900;
        padding: 8px 16px;
        line-height: 1.2;
    }
    .lookup-body{
        padding: 18px 22px 8px;
    }

    /* ---- Form labels above ---- */
    .label-above .layui-form-label{
        display:block;
        float:none;
        width:auto !important;
        text-align:left;
        padding: 0 0 6px 0;
        font-weight: 800;
        font-size: 18px; /* PC 默认就用 18，避免过大 */
        color:#3a3a3a;
    }
    .label-above .layui-form-label span{
        color:#e53935;
        margin-left:4px;
        font-weight:900;
    }
    .layui-input-block{
        margin-left:0;
        min-height: auto;
        box-sizing: border-box;
    }

    /* ---- Inputs ---- */
    .layui-form input.layui-input{
        height: 50px;              /* 统一高度 */
        border: 1px solid #d6d6d6;
        border-radius: 2px;
        padding: 10px 12px;
        font-size: 14px;           /* PC 默认 14 */
        color:#333;
        background:#fff;
        box-sizing: border-box;
    }

    /* Layui date input background keep */
    .layui-input-wrap .layui-input-prefix + .layui-input,
    .layui-input-wrap .layui-input-prefix ~ * .layui-input{
        background:#fff;
    }

    /* ---- Date prefix icon vertical align ---- */
    .layui-input-wrap{
        display: flex;
        align-items: center; /* 关键：prefix 与 input 垂直居中 */
    }
    .layui-input-wrap .layui-input-prefix{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        line-height: 50px;
    }

    /* ---- Help tip ---- */
    .help-tip{
        margin-top: 8px;
        display:flex;
        align-items:flex-start;
        gap: 6px;
        color:#666;
        font-size: 13px;
        line-height: 1.6;
    }
    .help-tip i{
        font-size: 14px;
        color:#333;
        margin-top: 2px;
    }

    /* ---- Button ---- */
    .btn-row{ margin-top: 8px; }

    .layui-btn{
        background:#153854;
        border:1px solid #153854;
        box-shadow: 0 2px 4px rgba(0,0,0,.35);
        border-radius: 6px;
        font-size: 20px;
        font-weight: 900;
        height: 50px;
        line-height: 50px;
        padding: 0 28px;
        letter-spacing: .5px;
        box-sizing: border-box;
    }
    .btn-fixed{
        width: 520px;
        max-width: 100%;
    }

    /* ---- Result area ---- */
    #result{ padding: 0 22px 22px; }
    .container-tit{
        font-size: 18px;
        font-weight: 900;
        color:#153854;
        margin: 12px 0 8px;
    }
    .container-con{
        font-size: 14px;
        color:#555;
        margin-bottom: 12px;
    }
    .layui-table thead{
        color:#fff;
        background:#153854;
    }
    .layui-laydate .layui-this,
    .layui-laydate .layui-this > div{
        background-color:#153854 !important;
        color:#fff !important;
    }

    /* ---- Prevent overflow caused by row negative margin / fixed width elements ---- */
    .layui-row{
        max-width: 100%;
        box-sizing: border-box;
    }
    img, table, .layui-table-view{
        max-width: 100% !important;
    }

    /* ===============================
       Mobile adjustments
       =============================== */
    @media (max-width: 768px){
        /* 容器左右留白，防止撑破 */
        .layui-container{
            padding-left: 12px !important;
            padding-right: 12px !important;
        }

        /* row 可能有负 margin，清掉 */
        .layui-row{
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* 卡片内部 padding 更紧凑 */
        .lookup-bar{
            font-size: 22px;
            padding: 12px 14px;
        }
        .lookup-body{
            padding: 14px 14px 6px;
        }

        .label-above .layui-form-label{
            font-size: 18px;
        }

        .layui-form input.layui-input{
            height: 50px;
            font-size: 15px;
        }

        .layui-input-wrap .layui-input-prefix{
            height: 50px;
            line-height: 50px;
        }

        .layui-btn{
            font-size: 22px;
            height: 62px;
            line-height: 62px;
            width: 100%;
        }

        .layui-table-header{ display:none; }
    }

    /* ===============================
       Desktop fine-tune (optional)
       =============================== */
    @media (min-width: 992px){
        /* 大屏让卡片更像截图：稍微增加左右 padding */
        .lookup-body{ padding: 18px 22px 8px; }
    }

</style>

<body>
    <div class="zh_content">
        {include file="public/newnav" }
    </div>

    <div class="layui-container">
        <div class="lookup-card">
            <div class="lookup-bar">{:lang('lookup.status_query_title')}</div>

            <div class="lookup-body">
                <form class="layui-form label-above" lay-filter="Form1" id="Form1" autocomplete="off">
                    <div class="layui-row layui-col-space30" style="margin-top: 10px;">

                        <!-- 护照号 -->
                        <div class="layui-col-xs12 layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label" for="passport_number">
                                    {:lang('lookup.passport_number')}<span>*</span>
                                </label>
                                <div class="layui-input-block passport-wrap">
                                    <input type="text" name="passport_number" lay-verify="required"
                                           placeholder="{:lang('lookup.passport_number_placeholder')}"
                                           class="layui-input" value="">
                                    <!-- 关键：给 file 一个 id，并隐藏 -->
                                    <input id="passport_file" class="passport-file" type="file" accept="image/*"
                                           onchange="uploadPassport(this,'passport')">

                                    <!-- 关键：label 的 for 指向 file 的 id -->
                                    <label class="passport-upload" for="passport_file" title="拍照/上传有效护照照片">
                                        <i class="layui-icon layui-icon-camera"></i>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- 出生日期 -->
                        <div class="layui-col-xs12 layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label" for="birth_date">
                                    {:lang('lookup.birth_date')}<span>*</span>
                                </label>
                                <div class="layui-input-block">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-date"></i>
                                        </div>
                                        <input type="text" name="birth_date" id="birth_date" lay-verify="required"
                                               placeholder="{:lang('lookup.birth_date_placeholder')}"
                                               class="layui-input layui-time" value="">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 姓 -->
                        <div class="layui-col-xs12 layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">{:lang('lookup.last_name')}<span>*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="last_name" lay-verify="required|english"
                                           placeholder="{:lang('lookup.last_name_placeholder')}"
                                           class="layui-input" value="">
                                    <div class="help-tip">
                                        <i class="layui-icon layui-icon-tips-fill"></i>
                                        <span>{:lang('lookup.last_name_tooltip')}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 名 -->
                        <div class="layui-col-xs12 layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">{:lang('lookup.first_name')}<span>*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="first_name" lay-verify="required|english"
                                           placeholder="{:lang('lookup.first_name_placeholder')}"
                                           class="layui-input" value="">
                                    <div class="help-tip">
                                        <i class="layui-icon layui-icon-tips-fill"></i>
                                        <span>{:lang('lookup.first_name_tooltip')}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 按钮：半宽且不铺满 -->
                        <div class="layui-col-xs12 layui-col-md6 btn-row">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn btn-fixed" lay-submit lay-filter="formSubmit" id="submit">
                                        {:lang('lookup.query_status_button')}
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>
            </div>

            <div class="layui-row container" style="display:none" id="result">
                <div class="layui-col-xs12 layui-col-md12" style="display:none" id="result1">
                    <div class="container-tit">{:lang('lookup.registered_status')}</div>
                    <div class="container-con">{:lang('lookup.approval_message')}</div>
                </div>
                <div class="layui-col-xs12 layui-col-md12">
                    <table class="layui-hide" id="demo"></table>
                </div>
            </div>

        </div>
    </div>

    {include file="public/newfooter" }


<script>
    var layer = layui.layer, form = layui.form, laydate = layui.laydate, table = layui.table;

    var ocrConfigRaw = '{$ocr_config|default = ''}'.replace(/&quot;/g, '"');
    var ocrConfig = {};
    var sdk = null;
    try {
        ocrConfig = ocrConfigRaw ? JSON.parse(ocrConfigRaw) : {};
    } catch (e) {
        console.error('Failed to parse OCR config', e);
    }
    if (window.PassportOCRSDK && ocrConfig.base_url && ocrConfig.app_id && ocrConfig.signature && ocrConfig.timestamp) {
        try {
            sdk = PassportOCRSDK.create({
                apiBase: ocrConfig.base_url,
                appId: ocrConfig.app_id,
                sign: ocrConfig
            });
        } catch (e) {
            console.error('Failed to init OCR sdk', e);
        }
    }
    // 更稳的手机判断
    function isMobile() {
        return window.matchMedia && window.matchMedia('(max-width: 767.98px)').matches;
    }

    // 日期控件（建议固定格式）
    $(".layui-form-item").find(".layui-time").each(function () {
        laydate.render({
            elem: this,
            trigger: 'click',
            format: 'yyyy-MM-dd'
        });
    });

    // ✅兼容你 onchange 传了第二个参数
    function uploadPassport(_this, type) {
        var file = _this.files && _this.files[0];
        var loadingIndex = null;

        var closeLoading = function () {
            if (loadingIndex !== null) {
                layer.close(loadingIndex);
                loadingIndex = null;
            }
        };
        var resetFileInput = function () {
            $(_this).val('');
        };

        if (!file) {
            layer.msg('{:lang("controller.upload_missing")}', {icon: 5});
            return false;
        }
        if (!/image\/\w+/.test(file.type || '')) {
            layer.msg("{:lang('js.upload_image_only')}", {icon: 5});
            return false;
        }
        if (!FileReader) {
            layer.msg("{:lang('js.browser_not_supported')}", {icon: 5});
            return false;
        }

        var url = "/home/upload/upload_passport";
        loadingIndex = layer.load(2, {shade: 0.3});
        compressImage(file, 0.2, async function (compressedFile) {
            try {
                if (!compressedFile) {
                    closeLoading();
                    resetFileInput();
                    layer.msg('{:lang("js.upload_retry")}', {icon: 5});
                    return false;
                }

                var ocrWarningMsg = '';
                if (sdk) {
                    try {
                        var ocrData = await sdk.recognizePassport(compressedFile, {
                            auto_rotate: true,
                            return_debug: false
                        });

                        if (ocrData && ocrData.code === 1 && ocrData.data) {
                            var ocr = ocrData.data || {};
                            var pad2 = function (n) {
                                return String(n || '').padStart(2, '0');
                            };
                            var buildDate = function (y, m, d) {
                                if (!y || !m || !d) return '';
                                return y + '-' + pad2(m) + '-' + pad2(d);
                            };

                            $('input[name="last_name"]').val(ocr.last_name || '');
                            $('input[name="first_name"]').val(ocr.first_name || '');
                            $('input[name="passport_number"]').val(ocr.passport_number || '');

                            var birthDate = buildDate(ocr.birth_date_year, ocr.birth_date_month, ocr.birth_date_day);
                            if (birthDate) {
                                $('input[name="birth_date"]').val(birthDate);
                            }
                        } else {
                            ocrWarningMsg = '{:lang("js.manual_entry_required")}';
                        }
                    } catch (ocrErr) {
                        ocrWarningMsg = '{:lang("js.manual_entry_required")}';
                    }
                } else {
                    ocrWarningMsg = '{:lang("js.manual_entry_required")}';
                }

                var formData = new FormData();
                formData.append('file', compressedFile);
                formData.append('path', 'mala');

                $.ajax({
                    url: url,
                    type: "post",
                    data: formData,
                    dataType: "json",
                    contentType: false,
                    processData: false,
                    mimeType: "multipart/form-data",
                    success: function (res) {
                        closeLoading();
                        resetFileInput();
                        if (res.code != 1) {
                            //layer.msg('{:lang("js.manual_entry_required")}', {icon: 5});
                            //return;
                        }
                    },
                    error: function () {
                        closeLoading();
                        resetFileInput();
                        //layer.msg('{:lang("js.manual_entry_required")}', {icon: 5});
                    }
                });
                if (ocrWarningMsg) {
                    layer.msg(ocrWarningMsg, {icon: 5});
                }
            } catch (e) {
                closeLoading();
                resetFileInput();
                layer.msg('{:lang("js.manual_entry_required")}', {icon: 5});
            }
        });
    }
    function compressImage(file, quality, callback) {
        console.log("开始压缩"+Date.now())
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (event) {
            const img = new Image();
            img.src = event.target.result;
            img.onload = function () {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                let maxWidth = 1200;
                let width = img.width;
                let height = img.height;
                if (width > maxWidth) {
                    height *= maxWidth / width;
                    width = maxWidth;
                }
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(img, 0, 0, width, height);
                canvas.toBlob(function (blob) {
                    const newFile = new File([blob], file.name, { type: file.type });
                    callback(newFile);
                }, file.type, quality);
            };
        };
    }

    // 监听提交
    form.on('submit(formSubmit)', function (data) {
        $('#result').hide();
        $('#result1').hide();

        $.ajax({
            type: "POST",
            url: "/home/lookup/enrollment",
            data: data.field,
            beforeSend: function () {
                window.index1 = layer.load(1, {shade: [0.3, '#fff']});
            },
            success: function (_data) {
                layer.close(window.index1);

                if (_data.code == 0) {
                    layer.msg(_data.msg, {icon: 5});
                    return;
                }

                $('#result').show();
                var row = _data.data || {};
                var hasFile = !!(row.file_url && row.file_url !== '');

                if (isMobile()) {
                    // 手机：字段-值
                    var mobileData = [
                        {field: '{:lang("lookup.passport_number")}', value: row.passport_number || ''},
                        {field: '{:lang("lookup.birth_date")}', value: row.birth_date || ''},
                        {field: '{:lang("lookup.last_name")}', value: row.last_name || ''},
                        {field: '{:lang("lookup.first_name")}', value: row.first_name || ''},
                        {field: hasFile ? '{:lang("lookup.document")}' : '{:lang("lookup.status")}', value: row.file_url || ''}
                    ];

                    if (hasFile) $('#result1').show();

                    table.render({
                        elem: '#demo',
                        data: mobileData,
                        cols: [[
                            {field:'field', title:'{:lang("lookup.field")}', width:110},
                            {
                                field:'value',
                                title:'{:lang("lookup.value")}',
                                templet: function(d){
                                    if (d.field === '{:lang("lookup.document")}') {
                                        return '<a href="'+ row.file_url +'?'+ Math.random() +'" target="_blank"><img src="/static/image/pdf.png" alt="{:lang("lookup.click_download")}"></a>';
                                    }
                                    if (d.field === '{:lang("lookup.status")}') {
                                        return '{:lang("lookup.in_progress")}';
                                    }
                                    return d.value;
                                }
                            }
                        ]]
                    });

                } else {
                    if (hasFile) $('#result1').show();

                    table.render({
                        elem: '#demo',
                        data: [row],
                        cols: [[
                            {field:'last_name', title:'{:lang("lookup.last_name")}', width:200},
                            {field:'first_name', title:'{:lang("lookup.first_name")}', width:200},
                            {field:'birth_date', title:'{:lang("lookup.birth_date")}', width:200},
                            {field:'passport_number', title:'{:lang("lookup.passport_number")}'},
                            {
                                field:'file_url',
                                title: hasFile ? '{:lang("lookup.document")}' : '{:lang("lookup.status")}',
                                templet: function(){
                                    if (hasFile) {
                                        return '<a href="'+ row.file_url +'?'+ Math.random() +'" target="_blank"><img src="/static/image/pdf.png" alt="{:lang("lookup.click_download")}"></a>';
                                    }
                                    return '{:lang("lookup.in_progress")}';
                                }
                            }
                        ]]
                    });
                }
            }
        });

        return false;
    });

    form.verify({
        english: [/^[A-Za-z]+$/, '{:lang("lookup.english_only")}']
    });
</script>
</body>
</html>