@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 mt-5"> 
    <form id="updateForm" class="text-nowrap col-11 col-6 mx-auto rounded shadow p-4">
        <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="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 userId = window.location.pathname.split('/').pop()

        userInfo = {}
        userInfoUrl = "{{ route('get_user_info') }}"
        
        const updateForm = document.querySelector('#updateForm')
        const sendUrl = "{{ route('update_sent') }}"
 
        const name = document.querySelector('input[name="name"]')
        const email = document.querySelector('input[name="email"]')
        const password = document.querySelector('input[name="password"]')
        const group = document.querySelector('select[name="group"]')
        const unit = document.querySelector('select[name="unit"]')
        
        init()

        function init(){

            let formData = new FormData()
            formData.append('_token', '{{ csrf_token() }}')
            formData.append('userID', userId)
            fetch(userInfoUrl, {
                method: 'POST',
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                userInfo = data.data
                render()
            })
        }

        function render(){
            name.value = userInfo.name
            email.value = userInfo.email
            password.value = userInfo.password
            group.value = userInfo.group
            unit.value = userInfo.unit
        }

        updateForm.addEventListener('submit', function(e){
            e.preventDefault()
            let formData = new FormData()
            formData.append('userID', userId)
            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('group', '使用者身份').replace('unit', '單位')
                    errorAlert(message)
                } else{
                    successAlert('更新成功', '{{ route('user-home') }}')
                }
            })
        })
    })

</script>