@extends('layouts.auth')

@section('title', '用户注册')

@push('styles')
<link rel="stylesheet" href="{{ asset('CmsProUi/component/pear/css/pear.css') }}">
<link rel="stylesheet" href="{{ asset('CmsProUi/font-awesome/4.7.0/css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ asset('Admin/css/admin.css') }}">
<link rel="stylesheet" href="{{ asset('Admin/css/variables.css') }}">
<link rel="stylesheet" href="{{ asset('Admin/css/reset.css') }}">
<link rel="stylesheet" href="{{ asset('Admin/css/other/login.css') }}">
@endpush

@section('content')
<div class="login-page">
    <div class="layui-row">
        <div class="layui-col-sm6 login-bg">
            <img class="login-bg-img" src="{{ asset('Admin/images/banner.png') }}" alt="">
        </div>
        <div class="layui-col-sm6 login-form">
            <div class="layui-form" lay-filter="form-submit">
                <div class="form-center">
                    <div class="form-center-box">
                        <div class="top-log-title">
                            <img class="top-log" src="{{ asset('Admin/images/logo.png') }}" alt="CMSPRO">
                            <span>用户中心</span>
                        </div>
                        <div class="top-desc">创建新账号</div>
                        @if($errors->any())
                        <div style="margin-top: 15px; padding: 10px; background: #fef0f0; border: 1px solid #fbc4c4; border-radius: 4px; color: #f56c6c; font-size: 13px;">
                            {{ $errors->first() }}
                        </div>
                        @endif
                        @if(session('success'))
                        <div style="margin-top: 15px; padding: 10px; background: #f0f9eb; border: 1px solid #b3e19d; border-radius: 4px; color: #67c23a; font-size: 13px;">
                            {{ session('success') }}
                        </div>
                        @endif
                        <div style="margin-top: 30px;">
                            <form method="POST" action="{{ url('/api/user/register') }}">
                                @csrf
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input name="username" value="{{ old('username') }}" lay-verify="required" placeholder="用户名（字母、数字、下划线）" autocomplete="off" class="layui-input" lay-reqText="用户名不能为空">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="fa fa-envelope"></i>
                                        </div>
                                        <input type="email" name="email" value="{{ old('email') }}" placeholder="邮箱地址（必填）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="fa fa-mobile"></i>
                                        </div>
                                        <input type="text" name="phone" value="{{ old('phone') }}" placeholder="手机号（选填）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-password"></i>
                                        </div>
                                        <input type="password" name="password" lay-verify="required" placeholder="密码（6-20位）" autocomplete="off" class="layui-input" lay-affix="eye" lay-reqText="密码不能为空">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-password"></i>
                                        </div>
                                        <input type="password" name="password_confirmation" lay-verify="required" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye" lay-reqText="确认密码不能为空">
                                    </div>
                                </div>
                                <div class="login-btn">
                                    <button id="registerButton" type="submit" lay-submit lay-filter="register" class="layui-btn login">立即注册</button>
                                </div>
                                <div style="text-align: center; margin-top: 12px;">
                                    已有账号？<a href="{{ url('/user/login') }}" style="color: #16b777;">去登录</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('CmsProUi/component/layui/layui.js') }}"></script>
<script src="{{ asset('CmsProUi/component/pear/pear.js') }}"></script>
<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
    }
});
layui.use(['toast', 'form', 'jquery', 'button'], function() {
    var toast = layui.toast;
    var form = layui.form;
    var $ = layui.jquery;
    var button = layui.button;

    $(document).keypress(function(e) {
        if (e.which == 13) {
            $("#registerButton").click();
        }
    });

    form.on('submit(register)', function(data) {
        button.load({
            elem: '#registerButton',
            text: '注册中...',
            time: 10000
        });
        $.ajax({
            url: '/api/user/register',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(data.field),
            success: function(res) {
                if (res.code === 0) {
                    toast.success({ title: res.message || '注册成功' }, function() {
                        window.location.href = '{{ url('/user/') }}';
                    });
                } else {
                    toast.error({ title: res.message || '注册失败' });
                    button.stop('#registerButton');
                }
            },
            error: function(xhr) {
                var msg = xhr.responseJSON?.message || '请求失败';
                toast.error({ title: msg });
                button.stop('#registerButton');
            }
        });
        return false;
    });
});
</script>
@endpush
