@extends('layout')
@section('content')

<div id="register-page">
  <div class="container">
    <div class="card custom-card">
      <div class="card-body">
        <h1 class="card-title my-4 text-center">ลงทะเบียนเข้าสู่ระบบ<br />E-learning</h1>
        <form id="registerForm"> 
          <h2>สำหรับบุคคลทั่วไป</h2>
          <div class="row">
            <div class="col-md-6 form-group">
              <label for="firstName">ชื่อ</label>
              <input type="text" class="form-control" id="firstName" name="firstName" placeholder="ชื่อ">
            </div>
            <div class="col-md-6 form-group">
              <label for="lastName">นามสกุล</label>
              <input type="text" class="form-control" id="lastName" name="lastName" placeholder="นามสกุล">
            </div>
            <div class="col-md-6 form-group">
              <label for="email">อีเมลล์</label>
              <input type="email" class="form-control" id="email" name="email" placeholder="อีเมลล์">
            </div>
            <div class="col-md-6 form-group">
              <label for="phone">เบอร์โทร</label>
              <input type="text" class="form-control" id="phone" name="phone" placeholder="เบอร์โทร">
            </div>
            <div class="col-md-6 form-group">
              <label for="gender">เพศ</label>
              <input type="text" class="form-control" id="gender" name="gender" placeholder="เพศ">
            </div>
            <div class="col-md-6 form-group">
              <label for="age">อายุ</label>
              <input type="text" class="form-control" id="age" name="age" placeholder="อายุ">
            </div>
            <div class="col-md-6 form-group">
              <label for="password">รหัสผ่าน</label>
              <input type="password" class="form-control" id="password" name="password" placeholder="รหัสผ่าน">
            </div>
            <div class="col-md-6 form-group">
              <label for="confirmPassword">ยืนยันรหัสผ่าน</label>
              <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
                placeholder="ยืนยันรหัสผ่าน">
            </div>
          </div>
          <div class="form-group form-check my-5">
            <input type="checkbox" class="form-check-input me-2" id="terms">
            <label class="form-check-label" for="terms">ฉันได้อ่านและยอมรับ <a href="#"
                class="text-green">การให้ความยินยอม นโยบายคุ้มครองข้อมูลส่วนบุคคล
                ข้อกำหนดและเงื่อนไข</a></label>
          </div>
          <button type="submit" class="green-btn btn w-50 mt-4 mx-auto d-block">สมัครสมาชิก</button>
        </form>
         <div id="responseMessage" class="mt-4"></div>
      </div>
    </div>
  </div>
</div>
<script>
  document.getElementById('registerForm').addEventListener('submit', async function (e) {
      e.preventDefault();

      // Collect form data
      const firstName = document.getElementById('firstName').value;
      const lastName = document.getElementById('lastName').value;
      const email = document.getElementById('email').value;
      const gender = document.getElementById('gender').value;
      const age = document.getElementById('age').value;
      const password = document.getElementById('password').value;

      // API URL
      // const apiUrl = '{{ config('app.url') }}/api/register';
      const apiUrl = "{{ config('app.url') }}/api/register";

      try {
          // Send data to API
          const response = await fetch(apiUrl, {
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                  firstName: firstName,
                  lastName: lastName,
                  email: email,
                  gender: gender,
                  age: age,
                  password: password,
              }),
          });

          // Parse the JSON response
          const result = await response.json();

          // Display success or error message
          const responseMessage = document.getElementById('responseMessage');
          if (response.ok) {
              responseMessage.innerHTML = `<div class="alert alert-success">User registered successfully!</div>`;
              setTimeout(() => {
                    // Redirect to the index page
                    window.location.href = '{{ config('app.url') }}/home'; // Change this to your desired index URL
                }, 2000);
          } else {
              responseMessage.innerHTML = `<div class="alert alert-danger">${result.status.errorMessage}</div>`;
          }
      } catch (error) {
          console.error('Error:', error);
          document.getElementById('responseMessage').innerHTML =
              `<div class="alert alert-danger">An error occurred. Please try again later.</div>`;
      }
  });
</script>
</body>
</html>
  
@endsection