<!DOCTYPE html>
<html lang="zh" class="h-full">
<head>
  <!-- Required Meta Tags Always Come First -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Laysense Auth">


  <!-- Title -->
  <title>Laysense Auth</title>

  <!-- Favicon -->
  <link rel="shortcut icon" href="https://static.laysense.cn/data/file/_4335ce.png?1709117691655">

  <!-- Font -->

  <!-- Theme Check and Update -->
  <script>
    const html = document.querySelector('html');
    const isLightOrAuto = localStorage.getItem('hs_theme') === 'light' || (localStorage.getItem('hs_theme') === 'auto' && !window.matchMedia('(prefers-color-scheme: dark)').matches);
    const isDarkOrAuto = localStorage.getItem('hs_theme') === 'dark' || (localStorage.getItem('hs_theme') === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);

    if (isLightOrAuto && html.classList.contains('dark')) html.classList.remove('dark');
    else if (isDarkOrAuto && html.classList.contains('light')) html.classList.remove('light');
    else if (isDarkOrAuto && !html.classList.contains('dark')) html.classList.add('dark');
    else if (isLightOrAuto && !html.classList.contains('light')) html.classList.add('light');
  </script>

  <!-- CSS HS -->
  <link rel="stylesheet" href="https://static.laysense.cn/data/file/cdn/preline.css">
</head>

<body class="dark:bg-neutral-900">
  <!-- ========== MAIN CONTENT ========== -->
  <main id="content">
    <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        <div class="max-w-xl mx-auto">
          <div class="text-center">
            <h1 class="text-3xl font-bold text-gray-800 sm:text-4xl dark:text-white">
              <?php echo($username);?>,欢迎来到来笙~！🥳
            </h1>
            <p class="mt-1 text-gray-600 dark:text-neutral-400">
              您还需要补充下述信息，以便我们为您提供更好的服务。您的隐私信息将被严格加密储存，并严格限制第三方应用的读取。
            </p>
          </div>
  
          <div class="mt-12">
            <!-- Form -->
            <form>
              <div class="grid gap-4 lg:gap-6">

                <?php
                    foreach($requireFields as $field){
                        switch ($field) {
                            case 'name':
                                echo '<div>
                                    <label for="name" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">用户名</label>
                                    <input type="text" id="name" name="name" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
                                </div>';
                            break;
                            case 'sex':
                                echo '                                    <label class="block text-sm text-gray-700 font-medium dark:text-white">性别</label>
                                <div class="grid sm:grid-cols-2 gap-2">
                                    <label for="hs-radio-in-form" class="flex p-3 w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400">
                                      <input type="radio" name="hs-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radio-in-form">
                                      <span class="text-sm text-gray-500 ms-3 dark:text-neutral-400">先生</span>
                                    </label>
                                    <label for="hs-radio-checked-in-form" class="flex p-3 w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400">
                                      <input type="radio" name="hs-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radio-checked-in-form" checked="">
                                      <span class="text-sm text-gray-500 ms-3 dark:text-neutral-400">女士</span>
                                    </label>
                                  </div>';
                            break;
                            case 'email':
                                echo '<div>
                                    <label for="email" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">邮箱</label>
                                    <input type="email" name="hs-work-email-hire-us-2" id="hs-work-email-hire-us-2" autocomplete="email" id="email" name="email" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
                                </div>';
                            break;
                            case 'phone':
                                echo '<div>
                                    <label for="phone" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">手机号(仅支持中国大陆，无需填写+86)</label>
                                    <input type="number" id="phone" name="phone" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
                                </div>';
                            break;
                            case 'address':
                                echo '<div>
                                    <label for="address" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">地址(您参与活动的奖品、来笙硬件、来笙活动邀请函可能会邮寄到此地址)</label>
                                    <div data-toggle="distpicker" data-autoselect="3" data-province="浙江省" class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-2">
                                        <select name="province" class="py-3 px-4 pe-9 block border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"></select>
                                        <select name="city" class="py-3 px-4 pe-9 block border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"></select>
                                        <select name="area" class="py-3 px-4 pe-9 block border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"></select>
                                    </div>
                                    <input type="text" id="address" name="address" placeholder="详细地址" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">

                                </div>';
                            break;
                            case 'birthday':
                                echo '<div>
                                    <label for="birthday" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">您的生日</label>
                                    <input type="date" id="birthday" name="birthday" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
                                </div>';
                            break;
                            case 'avatar':
                                echo '<div>
                                    <label class="block">
                                        <label for="birthday" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">给您设置一个美美的头像叭</label>
                                        <!--span class="sr-only">Choose profile photo</span-->
                                        <input type="file" name="avatar" id="avatar" class="block w-full text-sm text-gray-500
                                          file:me-4 file:py-2 file:px-4
                                          file:rounded-lg file:border-0
                                          file:text-sm file:font-semibold
                                          file:bg-blue-600 file:text-white
                                          hover:file:bg-blue-700
                                          file:disabled:opacity-50 file:disabled:pointer-events-none
                                          dark:text-neutral-500
                                          dark:file:bg-blue-500
                                          dark:hover:file:bg-blue-400
                                        ">
                                      </label>
                                      <div class="shrink-0 group block">
                                        <div class="flex items-center">
                                          <img id="avatarpreview"  class="inline-block shrink-0 size-[62px] rounded-full" src="/laysenseLogo.jpg" alt="Avatar">
                                          <div class="ms-3">
                                            <h3 class="font-semibold text-gray-800 dark:text-white">'.$username.'</h3>
                                            <p class="text-sm font-medium text-gray-400 dark:text-neutral-500">来笙新用户</p>
                                          </div>
                                        </div>
                                      </div>    
                                </div>';
                            break;
                            case 'sfz':
                            echo '<div>
                                <label for="sfz" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">中国大陆身份证号</label>
                                <input type="text" name="sfz" id="sfz" autocomplete="email" id="email" name="email" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
                            </div>';
                            break;
                            case 'realname':
                            echo '<div>
                                <label for="sfz" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">真实姓名</label>
                                <input type="text" name="sfz" id="sfz" autocomplete="email" id="email" name="email" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
                            </div>';
                            break;
                            default:
                                break;
                        }
                    }
                ?>

  
              <!-- Checkbox -->
              <div class="mt-3 flex border-gray-200">
                <div class="flex">
                  <input id="remember-me" name="remember-me" type="checkbox" class="shrink-0 mt-1.5 border-gray-800 rounded text-blue-600 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
                </div>
                <div class="ms-3">
                  <label for="remember-me" class=" text-sm text-gray-600 dark:text-neutral-400">您已了解并同意来笙<a class="text-blue-600 decoration-2 hover:underline focus:outline-none focus:underline font-medium dark:text-blue-500" href="#">隐私条款</a>，同意来笙安全地处理和储存您的个人信息，并在您同意和授权的前提下安全地提供给第三方应用使用。</label>
                </div>
              </div>
              <!-- End Checkbox -->
  
              <div class="mt-6 grid">
                <button type="submit" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">完善信息</button>
              </div>
  
              <div class="mt-3 text-center">
                <p class="text-sm text-gray-500 dark:text-neutral-500">
                  您的信息将被加密处理和储存，来笙不会保存您的身份证号等敏感内容。<br />仅限中国大陆用户使用，国际用户请咨询 admin@laysense.com
                </p>
              </div>
            </form>
            <!-- End Form -->
          </div>
        </div>
      </div>

    <p class="mt-3 flex justify-center items-center text-center divide-x divide-gray-300 dark:divide-neutral-700">
        ©上海来笙信息科技有限公司 2024  </p>
  
        
    </main>
    <!-- ========== END MAIN CONTENT ========== -->
  
    <!-- JS Implementing Plugins -->
  
    <!-- JS PLUGINS -->
    <!-- Required plugins -->
    <script src="https://static.laysense.cn/data/file/cdn/preline.js"></script>
    <script src="/jquery.js"></script>
    <script src="/distpicker.js"></script>
    <script>
        
    document.querySelector('#avatar').onchange = function (){
      if(this.files.length){
        let file = this.files[0];
        let reader = new FileReader();
        //新建 FileReader 对象
        reader.onload = function(){
          // 当 FileReader 读取文件时候，读取的结果会放在 FileReader.result 属性中
          document.querySelector('#avatarpreview').src = this.result;
        };
        // 设置以什么方式读取文件，这里以base64方式
        reader.readAsDataURL(file);
       }
    }

    </script>
    <!-- JS THIRD PARTY PLUGINS -->
  </body>
  </html>