@extends('layouts.app')
@section('title', '新增使用者 - 閱讀卡管理平台')
@section('content')
<div class="card">
    <div class="card-header"><h5 class="mb-0"><i class="bi bi-person-plus me-1"></i>新增使用者</h5></div>
    <div class="card-body">
        <form method="POST" action="{{ route('admin.user.store') }}">
            @csrf
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">帳號</label>
                    <input type="text" class="form-control" name="user_uid" value="{{ old('user_uid') }}" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">密碼</label>
                    <div class="input-group">
                        <input type="password" class="form-control" name="user_password" id="pw1" required>
                        <button type="button" class="btn btn-outline-secondary" onclick="togglePw('pw1', 'pwIcon1')" tabindex="-1"><i class="bi bi-eye" id="pwIcon1"></i></button>
                    </div>
                    <div class="form-text" style="font-size:.78rem;">至少12碼，含大小寫英文、數字及特殊字元</div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">確認密碼</label>
                    <div class="input-group">
                        <input type="password" class="form-control" name="user_password_confirmation" id="pw2" required>
                        <button type="button" class="btn btn-outline-secondary" onclick="togglePw('pw2', 'pwIcon2')" tabindex="-1"><i class="bi bi-eye" id="pwIcon2"></i></button>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">姓名</label>
                    <input type="text" class="form-control" name="user_name" value="{{ old('user_name') }}" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Email</label>
                    <input type="email" class="form-control" name="user_email" value="{{ old('user_email') }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">學校代碼</label>
                    <input type="text" class="form-control" name="user_school_code" value="{{ old('user_school_code') }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">學校名稱</label>
                    <input type="text" class="form-control" name="user_school" value="{{ old('user_school') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">角色</label>
                    <select name="user_role" class="form-select" required>
                        @foreach($roles as $key => $name)
                        <option value="{{ $key }}">{{ $name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">狀態</label>
                    <select name="is_active" class="form-select">
                        <option value="1" selected>啟用</option>
                        <option value="0">停用</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">帳號到期日</label>
                    <input type="date" class="form-control" name="expires_at" value="{{ old('expires_at') }}">
                    <div class="form-text" style="font-size:.78rem;">留空表示永久有效</div>
                </div>
                <div class="col-md-3">
                    <label class="form-label">權限等級</label>
                    <input type="number" class="form-control" name="user_type" value="0">
                </div>
            </div>
            <div class="mt-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>新增</button>
                <a href="{{ route('admin.user.index') }}" class="btn btn-secondary">返回</a>
            </div>
        </form>
    </div>
</div>
@push('scripts')
<script>
function togglePw(inputId, iconId) {
    var input = document.getElementById(inputId);
    var icon = document.getElementById(iconId);
    if (input.type === 'password') { input.type = 'text'; icon.classList.replace('bi-eye', 'bi-eye-slash'); }
    else { input.type = 'password'; icon.classList.replace('bi-eye-slash', 'bi-eye'); }
}
document.querySelector('form').addEventListener('submit', function(e) {
    if (document.getElementById('pw1').value !== document.getElementById('pw2').value) {
        e.preventDefault(); alert('兩次密碼輸入不一致！');
    }
});
</script>
@endpush
@endsection