<div class="text-center mb-6">
        <h1 class="text-3xl font-bold text-blue-600">J-Mail</h1>
        <p class="text-gray-500 mt-1">แบบฟอร์มสำหรับฝึกสมัครอีเมล</p>
    </div>

    <div id="message-box" class="hidden p-4 rounded-lg mb-4 text-sm text-center"></div>

    <form id="signup-form" class="space-y-4" novalidate>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label for="firstName" class="block text-sm font-medium text-gray-700">ชื่อจริง</label>
                <input type="text" id="firstName" name="firstName" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
            </div>
            <div>
                <label for="lastName" class="block text-sm font-medium text-gray-700">นามสกุล</label>
                <input type="text" id="lastName" name="lastName" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
            </div>
        </div>

        <div>
            <label for="username" class="block text-sm font-medium text-gray-700">ชื่ออีเมลที่ต้องการ (ภาษาอังกฤษ)</label>
            <div class="mt-1 flex rounded-md shadow-sm">
                <input type="text" id="username" name="username" required class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-l-md focus:ring-blue-500 focus:border-blue-500 border-gray-300" placeholder="เช่น somchai.k">
                <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
                    @jmail.com
                </span>
            </div>
             <p class="mt-1 text-xs text-gray-500">ใช้ได้เฉพาะภาษาอังกฤษ (a-z), ตัวเลข (0-9) และจุด (.)</p>
        </div>

        <div>
            <label for="password" class="block text-sm font-medium text-gray-700">สร้างรหัสผ่าน</label>
            <input type="password" id="password" name="password" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
             <p class="mt-1 text-xs text-gray-500">ต้องมีความยาวอย่างน้อย 8 ตัวอักษร</p>
        </div>

        <div>
            <label for="confirmPassword" class="block text-sm font-medium text-gray-700">ยืนยันรหัสผ่าน</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
        </div>

        <div>
            <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                สมัครใช้งาน
            </button>
        </div>
    </form>
</div>

<script>
    // --- ส่วนของโค้ดโปรแกรม (JavaScript) ---

    // ฐานข้อมูลจำลอง: ชื่ออีเมลที่มีคนใช้แล้ว
    const takenUsernames = ['admin', 'test', 'user', 'somchai', 'somsri'];

    const form = document.getElementById('signup-form');
    const messageBox = document.getElementById('message-box');

    // เมื่อฟอร์มถูกกด "สมัครใช้งาน"
    form.addEventListener('submit', function(event) {
        // หยุดการทำงานปกติของฟอร์ม
        event.preventDefault(); 

        // ดึงข้อมูลจากช่องกรอกต่างๆ
        const firstName = document.getElementById('firstName').value.trim();
        const lastName = document.getElementById('lastName').value.trim();
        const username = document.getElementById('username').value.toLowerCase().trim();
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        // --- เริ่มการตรวจสอบข้อมูล ---

        // 1. ตรวจสอบว่ากรอกข้อมูลครบทุกช่องหรือไม่
        if (!firstName || !lastName || !username || !password || !confirmPassword) {
            showMessage('ไม่สำเร็จ: กรุณากรอกข้อมูลให้ครบทุกช่องเลยนะ', 'error');
            return;
        }

        // 2. ตรวจสอบว่ารหัสผ่านตรงกันหรือไม่
        if (password !== confirmPassword) {
            showMessage('ไม่สำเร็จ: รหัสผ่านทั้งสองช่องไม่ตรงกัน ลองตรวจสอบดูอีกครั้งนะ', 'error');
            return;
        }

        // 3. ตรวจสอบว่ารหัสผ่านสั้นเกินไปหรือไม่
        if (password.length < 8) {
            showMessage('ไม่สำเร็จ: รหัสผ่านสั้นเกินไปจ้ะ ต้องมีอย่างน้อย 8 ตัวอักษรนะ', 'error');
            return;
        }

        // 4. ตรวจสอบรูปแบบของชื่ออีเมล
        const usernameRegex = /^[a-z0-9.]+$/;
        if (!usernameRegex.test(username)) {
            showMessage('ไม่สำเร็จ: ชื่ออีเมลต้องเป็นภาษาอังกฤษ ตัวเลข หรือมีจุด (.) เท่านั้นนะ', 'error');
            return;
        }

        // 5. ตรวจสอบว่าชื่ออีเมลนี้มีคนใช้แล้วหรือยัง
        if (takenUsernames.includes(username)) {
            showMessage(`ไม่สำเร็จ: ชื่ออีเมล ${username}@jmail.com มีคนอื่นใช้ไปแล้ว ลองใช้ชื่ออื่นดูนะ`, 'error');
            return;
        }

        // --- เมื่อผ่านการตรวจสอบทั้งหมด ---
        const fullName = `${firstName} ${lastName}`;
        const finalEmail = `${username}@jmail.com`;
        showMessage(`ยินดีด้วย ${fullName}! การสมัครอีเมล ${finalEmail} สำเร็จแล้ว!`, 'success');

        // เพิ่มชื่อที่สมัครสำเร็จลงในฐานข้อมูลจำลอง (เพื่อให้ครั้งต่อไปใช้ซ้ำไม่ได้)
        takenUsernames.push(username);

        // ล้างข้อมูลในฟอร์ม
        form.reset();
    });

    /**
     * ฟังก์ชันสำหรับแสดงข้อความผลลัพธ์
     * @param {string} text - ข้อความที่ต้องการแสดง
     * @param {string} type - ประเภท 'success' (สำเร็จ) หรือ 'error' (ไม่สำเร็จ)
     */
    function showMessage(text, type) {
        messageBox.textContent = text;
        messageBox.classList.remove('hidden');

        if (type === 'success') {
            messageBox.classList.remove('bg-red-100', 'text-red-700');
            messageBox.classList.add('bg-green-100', 'text-green-700');
        } else { // error
            messageBox.classList.remove('bg-green-100', 'text-green-700');
            messageBox.classList.add('bg-red-100', 'text-red-700');
        }
    }
</script>