@extends('admin.content')

@section('title', '修改密码')

@section('content')
<div class="layui-card">
  <div class="layui-card-header">修改密码</div>
  <div class="layui-card-body">
    <form class="layui-form" lay-filter="LAY-password-form" style="max-width:480px;">
      <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
          <div class="layui-form-mid">{{ $username }}</div>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">当前密码</label>
        <div class="layui-input-block">
          <input type="password" name="current_password" required lay-verify="required" class="layui-input" autocomplete="current-password">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">新密码</label>
        <div class="layui-input-block">
          <input type="password" name="password" required lay-verify="required" class="layui-input" autocomplete="new-password" placeholder="至少 6 位">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">确认新密码</label>
        <div class="layui-input-block">
          <input type="password" name="password_confirmation" required lay-verify="required" class="layui-input" autocomplete="new-password">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="LAY-password-save">保存</button>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection

@push('scripts')
<script>
layui.use(['form', 'layer'], function () {
  var form = layui.form, layer = layui.layer, $ = layui.$;
  var token = @json(csrf_token());

  form.on('submit(LAY-password-save)', function (data) {
    $.ajax({
      url: @json(route('user.password.update')),
      method: 'PUT',
      data: Object.assign({}, data.field, { _token: token }),
      success: function (res) {
        layer.msg(res.msg || (res.code === 0 ? '密码已更新' : '失败'), { icon: res.code === 0 ? 1 : 2 }, function () {
          if (res.code === 0) {
            $('input[name=current_password], input[name=password], input[name=password_confirmation]').val('');
          }
        });
      },
      error: function (xhr) {
        var body = xhr.responseJSON || {};
        var msg = body.msg || body.message;
        if (!msg && body.errors) {
          var first = Object.values(body.errors)[0];
          msg = Array.isArray(first) ? first[0] : first;
        }
        layer.msg(msg || '保存失败', { icon: 2 });
      }
    });
    return false;
  });
});
</script>
@endpush