@extends('layouts.admin-layout')
@include('includes.getFormData')
@include('includes.errorAlert')
@include('includes.successAlert')
@section('title', '新增使用者')
@section('content')

<h3 class="ms-2 mb-4">新增使用者</h3>
<div class="row mb-3">  
    <form id="createForm" class="text-nowrap mx-auto col-11 col-6 rounded shadow p-4">
        @csrf
        <div class="mb-2 row">
            <label class="col-form-label col-4" for="name">姓名</label>
            <div class="col-8">
                <input class="form-control" type="text" name="name" required>
            </div>
        </div>
        <div class="mb-2 row">
            <label class="col-form-label col-4" for="email">Email</label>
            <div class="col-8">
                <input class="form-control" type="email" name="email" required>
            </div>
        </div>
        <div class="mb-2 row">
            <label class="col-form-label col-4" for="password" autocomplete="off">密碼</label>
            <div class="col-8">
                <input class="form-control" type="password" name="password" minlength="8" required>
            </div>
        </div>
        <div class="mb-2 row">
            <label class="col-form-label col-4" for="company">公司</label>
            <div class="col-8">
                <select class="form-control" name="company">
                    <option value="comma">逗點</option>
                    <option value="n23">台灣北緯二十三度</option>
                </select>
            </div>
        </div>
        <div class="mb-2 row">
            <label class="col-form-label col-4" for="gruop">使用者身份</label>
            <div class="col-8">
                <select class="form-control" name="group">
                    <option value="admin">管理員</option>
                    <option value="user">一般使用者</option>
                </select>
            </div>
        </div>
        <div class="mb-3 row">
            <label class="col-form-label col-4" for="unit">單位</label>
            <div class="col-8">
                <select class="form-control" name="unit">
                    <option value="comma">逗點</option>
                    <option value="n23">台灣北緯二十三度</option>
                    <option value="roll_call">早點名</option>
                    <option value="experiment">實驗室</option>
                </select>
            </div>
        </div>
        <div class="text-end"> 
            <button class="btn btn-warn me-2" type="button" onclick="window.history.back()">返回</button>
            <button class="btn btn-create" type="submit">新增</button>
        </div>
    </form>
</div>

@endsection

<script>
    document.addEventListener('DOMContentLoaded', function(){
        const createForm = document.querySelector('#createForm')
        const sendUrl = "{{ route('register') }}"   
    
        createForm.addEventListener('submit', function(e){
            e.preventDefault()
            let formData = new FormData()
            getFormData(formData)
            fetch( sendUrl, {
                'method' :'POST',
                'body': formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.code !== 200){
                    const message = data.message.replace('; ', '\n').replace('name', '姓名')
                        .replace('password', '密碼').replace('gruop', '使用者身份').replace('unit', '單位')
                    errorAlert(message)
                } else{
                    successAlert('新增成功', '{{ route('user-home') }}')
                }
            })
        })
    })
  
</script>