@extends('admin.master')

@section('top')
	<div class="top-breadcrumb">
		<h5>绑定邮箱</h5>
	</div>
@endsection

@section('content')
<div class="bind-email-wrap">
  <div class="bind-email-title">
    <h3>绑定邮箱账号</h3>
    <p>绑定后可利用外贸易收发邮件，可绑定多个邮箱，绑定遇到问题请联系客服。</p>
    <p>
      <a href="https://www.cn86.cn/news/62249.html" target="_blank">《QQ邮箱如何开启IMAP协议》</a>
      <a href="https://www.cn86.cn/news/62250.html" target="_blank">《163邮箱如何开启IMAP协议》</a>
    </p>
  </div>
  <div class="bind-email-content">
    <div class="bind-email-add_btn">
      <i class="iconfont icon-plus"></i>
      <span>绑定邮箱</span>
    </div>
    <ul class="bind-email-list">
      @foreach ($mails as $mail)
      <li>
        <i class="iconfont icon-a-youjian1"></i>
        <span>{{$mail->email}}</span>
        <i class="iconfont icon-close delete-mail-btn" data-id="{{$mail->id}}"></i>
      </li>
      @endforeach
    </ul>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="bind-email-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="true"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">设置你的邮箱账号</h4>
          </div>
          <div class="modal-body clearfix">
            <form method="POST" action="{{url('admin/mail')}}" id="email-bind-form">
              {{ csrf_field() }}
              <div class="form-group">
                <label for="email-address">邮箱地址</label>
                <div class="form-group-body">
                  <input type="email" class="form-control" id="email-address" placeholder="请输入邮箱地址" name='email'>
                  <small class="form-text"></small>
                </div>
              </div>
              <div class="form-group">
                <label for="email-password">邮箱密码</label>
                <div class="form-group-body">
                  <input type="email" class="form-control" id="email-password" placeholder="请输入密码或则授权码" name='password'>
                  <small class="form-text"></small>
                </div>
              </div>
              <h3 class="form-group-title">IMAP设置</h3>
              <div class="row">
                <div class="col-lg-6">
                  <div class="form-group">
                    <label for="imap-address">地址</label>
                    <div class="form-group-body">
                      <input type="email" class="form-control" id="imap-address" placeholder="请输入地址" name='imap_host'>
                      <small class="form-text"></small>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    <label for="imap-port">端口</label>
                    <div class="form-group-body">
                      <input type="email" class="form-control" id="imap-port" placeholder="993" value="993" name='imap_port'>
                      <small class="form-text"></small>
                    </div>
                  </div>
                </div>
              </div>
              <h3 class="form-group-title">SMTP设置</h3>
              <div class="row">
                <div class="col-lg-6">
                  <div class="form-group">
                    <label for="smtp-address">地址</label>
                    <div class="form-group-body">
                      <input type="email" class="form-control" id="smtp-address" placeholder="请输入地址" name='smtp_host'>
                      <small class="form-text"></small>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    <label for="smtp-port">端口</label>
                    <div class="form-group-body">
                      <input type="email" class="form-control" id="smtp-port" placeholder="465" value="465" name='smtp_port'>
                      <small class="form-text"></small>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
              <button class="btn btn-default btn-modal-cancel btn-modal-close ml-10" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary email-submit">验证</button>
          </div>
      </div>
  </div>
</div>
<!-- Modal End -->
@endsection

@section('foot')
<script>
$(function(){
  // 点击打开弹窗
  $('.bind-email-add_btn').on('click', function(){
    $('#bind-email-modal').modal({backdrop: 'static', keyboard: false});
  });
  // 监听弹窗关闭
  $('#bind-email-modal').on('hidden.bs.modal', function (e) {
    $(".form-control").val('')
    $(".form-control").removeClass('error')
    $(".form-text").text('').hide()
  })
  // 点击验证
  $(".email-submit").click(function (){
    var flagArr = []
    var flag = true
    $(".form-control").each(function () {
      flag = formValidate(this)
      flagArr.push(flag)
    })
    if(!flagArr.some(function(item) {return !item})) {
      $("#email-bind-form").submit()
      $("#bind-email-modal .modal-footer").html('<p>邮箱验证中，请不要关闭此弹窗和刷新此页面...</p>')
    }
  })
  
  // 错误提示
  var validateText = {
    'email-address': {
      'empty': '邮箱地址不能为空',
      'format': '邮箱地址格式不正确'
    },
    'email-password': {
      'empty': '邮箱密码不能为空'
    },
    'imap-address': {
      'empty': 'IMAP地址不能为空'
    },
    'imap-port': {
      'empty': 'IMAP端口不能为空'
    },
    'smtp-address': {
      'empty': 'SMTP地址不能为空'
    },
    'smtp-port': {
      'empty': 'SMTP端口不能为空'
    }
  }

  // 表单验证
  var formValidate = function (self) {
    var id = $(self).attr('id')
    var value = $(self).val()
    if(value == ''){
      $(self).addClass('error')
      $(self).next().text(validateText[id].empty).show()
      return false
    }
    if (id == 'email-address') {
      var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
      if(!reg.test(value)){
        $(self).addClass('error')
        $(self).next().text(validateText[id].format).show()
        return false
      }
    }
    $(self).removeClass('error')
    $(self).next().text('').hide()
    return true
  }

  // 失去焦点验证
  $(".form-control").each(function () {
    $(this).blur(function() {
      formValidate(this)
    })
  })

  // 删除邮箱
  $(".delete-mail-btn").click(function (){
    var flag = confirm('确定删除此邮箱吗？')
    if (!flag) return
    var id = $(this).attr('data-id')
    $.ajax({
      url: "{{url('admin/mail')}}/" + id,
      type: 'DELETE',
      success: function (res) {
        alert('删除成功！')
        window.location.reload()
      },
      error: function (err) {
        alert('删除失败, 请重试！')
        window.location.reload()
      }
    })
  })
})
</script>
@endsection
