@extends('Admin.component.layout')
@section('title', '帳號管理')
@section('content')

@if(session()->has('alert_message'))
    <script>
        alert('{{ session("alert_message") }}');
    </script>
@endif


<div class="col-md-12">
<div class="card card-shadow mb-4">
	<div class="card-header">
		<div class="card-title">
			
		</div>
	</div>
	<div class="card-body">
		<form class="px-5 pb-4 pt-0" method="post" id="UserStore" action="{{ route('user.insert') }}" enctype="multipart/form-data">
			@csrf
				<input type="hidden" name="userid" value="{{ session('id') }}">
				<div id="success_msg" style="display: none;">
				<div class="alert alert-success d-flex align-items-center" role="alert">
					<div>
					<i class="fa-solid fa-check"></i>帳號可以使用
					</div>
				</div>
			</div>
			
			<div id="error_msg" style="display: none;">
				<div class="alert alert-danger d-flex align-items-center" role="alert">
					<div>
					<i class="fa-solid fa-xmark"></i>帳號已被使用
					</div>
				</div>
			</div>
				<div class="form-group">
					<label for="id" class="form-label">帳號</label>
					<input type="text" value="" name="id" id="id" class="form-control" onblur="codeChk()" onKeyUp="value=value.replace(/[^\w\.\/]/ig,'')">
				</div>
				<div class="form-group">
					<label for="name" class="form-label">姓名</label>
					<input type="text" value="" name="name" id="name" class="form-control">
				</div>
				<div class="form-group">
					<label for="password" class="form-label">密碼</label>
					<input type="password" value="" name="password" id="password" class="form-control"  minlength="8" maxlength="20" onKeyUp="value=value.replace(/[^\w\.\/]/ig,'')">
					<input type="checkbox" id="togglePassword" onclick="togPWD()"> <label for="togglePassword">顯示密碼</label>
				</div>
				<div class="form-group">
					<label for="repassword" class="form-label">再次輸入密碼</label>
					<input type="text" value="" name="repassword" id="repassword" class="form-control" minlength="8" maxlength="20" onKeyUp="value=value.replace(/[^\w\.\/]/ig,'')">
				</div>
				<div class="form-group">
					<label for="email" class="form-label">email</label>
					<input type="email" value="" name="email" id="email" class="form-control"
					pattern=".+@beststartupever.com">
				</div>
				<div class="form-group">
					<label for="odate" class="form-label">使用時限</label>
					<input type="date" value="" name="odate" id="odate" class="form-control">
				</div>
				<div class="form-group d-none">
					<label for="last_login" class="form-label">狀態</label><br>
					<input type="radio" name="enable" id="enable_Y" value="Y" checked>開啟
					<input type="radio" name="enable" id="enable_N" value="N">關閉
				</div>

			<button type="button" class="btn btn-success" onclick="chk()">送出</button>
			<a href="{{ route('user.list') }}" class="btn btn-secondary">返回</a>
		</form>
	</div>
</div>
</div>

<script>
	function codeChk(){
		$('#success_msg').hide();
		$('#error_msg').hide();
		let id = $('#id').val();
		let result = false;
		$.ajax({
            url: '/user/getIDS/' + id,
            type: 'GET',
			async: false,
            success: function(response){
				console.log(response);
				if(response.length > 0){
					$('#id').css('border','2px solid #f00').css('background','#ffe9f1');
					$('#error_msg').show();
					result = false;
				}else{
					$('#id').css('border','2px solid #09c909').css('background','#e9ffe9');
					$('#success_msg').show();
					result = true;
				}
            }
        });
		return result;
	}
	
	function chk(){
		//判斷欄位是否填寫
		let id = $('#id').val();
		let name = $('#name').val();
		let pwd = $('#password').val();
		let repwd = $('#repassword').val();
		let email = $('#email').val();
		let enable = $('input[name="enable"]:checked').val();
		let codeChkResult = true; //codeChk();
		if(repwd == "" || repwd == undefined){
			alert('確認密碼欄位未輸入');
		}else if(pwd.length < 6 || pwd.length > 20){
			alert('密碼欄位限制6~20位英文數字混和');
		}else if(id == "" || id == undefined){
			alert('帳號欄位未輸入');
		}else if(name == "" || name == undefined){
			alert('姓名未輸入');
		}else if(pwd != repwd){
			alert('確認輸入密碼錯誤');
		}else if(email == "" || email == undefined){
			alert('email欄位未輸入');
		}else if(enable == "" || enable == undefined){
			alert('狀態未勾選');
		}else if(codeChkResult == false){
			alert('帳號已存在');
		}else{
			$('#UserStore').submit();
		}
	}

	function togPWD(){
		let key = $('#togglePassword').prop('checked');
		if(key == true){
			//代表勾選
			$('#password').prop('type','text');
		}else{
			//代表沒勾選
			$('#password').prop('type','password');
		}
	}
</script>
@stop