@extends('frontend::layouts.applogin')

@push('styles')
  <link href="{{ asset('assets/frontend/css/resetpass.css') }}" rel="stylesheet">
@endpush

@section('content')
<!-- ใช้ #login-page และ .login-box เหมือนหน้า login -->
<div id="login-page">
  <div class="login-box">
    {{-- <img src="{{ asset('assets/frontend/images/logo.png') }}" alt="Logo"> --}}
    <h2>ตั้งรหัสผ่านใหม่</h2>
    <p class="subtitle">โปรดตั้งรหัสผ่านใหม่ของคุณ</p>
    <p class="description">กรุณากรอกรหัสผ่านใหม่ และยืนยันรหัสผ่านเพื่อรีเซ็ตรหัสผ่านของคุณ<br>
      <span style="color:#b50000;font-size:90%;">* รหัสผ่านสามารถใช้ได้เฉพาะภาษาอังกฤษ (a-z, A-Z), ตัวเลข (0-9) และอักขระพิเศษเท่านั้น</span>
    </p>

    <form action="{{ route('frontend.reset-password.update', $member_id) }}" method="POST" id="reset-password-form" autocomplete="off">
      @csrf

      <div class="form-group" style="position: relative;">
        <label class="tb-menu-topleft">รหัสผ่านใหม่</label>
        <input 
          type="password" 
          name="password" 
          id="password"
          placeholder="กรอกรหัสผ่านใหม่"
          required
          minlength="8"
          class="@error('password') is-invalid @enderror"
          style="padding-right: 40px;"
          pattern="^[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':\\\|,.<>\/?`~]+$" title="ใช้ได้เฉพาะภาษาอังกฤษ ตัวเลข และอักขระพิเศษ" autocomplete="new-password" >
        <span onclick="togglePassword('password', this)" style="position:absolute;top:38px;right:14px;cursor:pointer;">
          <i class="fas fa-eye" id="toggle-password-eye"></i>
        </span>
        @error('password')
          <span class="text-danger tb-menu-topleft">{{ $message }}</span>
        @enderror
        <span class="text-danger tb-menu-topleft" id="password-error-msg" style="display:none;"></span>
      </div>

      <div class="form-group" style="position: relative;">
        <label class="tb-menu-topleft">ยืนยันรหัสผ่านใหม่</label>
        <input 
          type="password" 
          name="password_confirmation" 
          id="password_confirmation"
          placeholder="ยืนยันรหัสผ่านใหม่"
          required
          minlength="8"
          class="@error('password_confirmation') is-invalid @enderror"
          style="padding-right: 40px;"
          pattern="^[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':\\\|,.<>\/?`~]+$"  title="ใช้ได้เฉพาะภาษาอังกฤษ ตัวเลข และอักขระพิเศษ" autocomplete="new-password"
        >
        <span onclick="togglePassword('password_confirmation', this)" style="position:absolute;top:38px;right:14px;cursor:pointer;">
          <i class="fas fa-eye" id="toggle-password-confirmation-eye"></i>
        </span>
        @error('password_confirmation')
          <span class="text-danger tb-menu-topleft">{{ $message }}</span>
        @enderror
        <span class="text-danger tb-menu-topleft" id="password-confirmation-error-msg" style="display:none;"></span>
      </div>

      <button type="submit" id="reset-btn">
        <i class="fas fa-key"></i> ตั้งรหัสผ่านใหม่
      </button>
    </form>

  </div>
</div>

@if(session('success'))
<script>
  document.addEventListener('DOMContentLoaded', function() {
    Swal.fire({
      icon: 'success',
      title: 'สำเร็จ!',
      html: '{{ session('success') }}',
      confirmButtonText: 'ตกลง',
      confirmButtonColor: '#28a745',
      showClass: {
        popup: 'animate__animated animate__fadeInDown'
      },
      hideClass: {
        popup: 'animate__animated animate__fadeOutUp'
      }
    }).then(function() {
      window.location.href = "{{ route('frontend.login') }}";
    });
  });
</script>
@endif

@if(session('error'))
<script>
  document.addEventListener('DOMContentLoaded', function() {
    Swal.fire({
      icon: 'error',
      title: 'เกิดข้อผิดพลาด',
      html: '{{ session('error') }}',
      confirmButtonText: 'ตกลง',
      confirmButtonColor: '#e60303',
      showClass: {
        popup: 'animate__animated animate__fadeInDown'
      },
      hideClass: {
        popup: 'animate__animated animate__fadeOutUp'
      }
    });
  });
</script>
@endif

@push('scripts')
<script>
  /**
   * Toggle Password Visibility
   * @param {string} fieldId - ID of the password input field
   * @param {HTMLElement} iconElement - The icon element that was clicked
   */
  function togglePassword(fieldId, iconElement) {
    const passwordField = document.getElementById(fieldId);
    const icon = iconElement.querySelector('i');
    
    if (passwordField.type === 'password') {
      // แสดงรหัสผ่าน
      passwordField.type = 'text';
      icon.classList.remove('fa-eye');
      icon.classList.add('fa-eye-slash');
    } else {
      // ซ่อนรหัสผ่าน
      passwordField.type = 'password';
      icon.classList.remove('fa-eye-slash');
      icon.classList.add('fa-eye');
    }
  }

  // เพิ่ม client-side validation เฉพาะภาษาอังกฤษ, ตัวเลข, อักขระพิเศษ
  function isValidPassword(password) {
    // allow only A-Za-z0-9 and typical special characters
    return /^[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]+$/.test(password);
  }

  document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('reset-password-form');
    const passwordInput = document.getElementById('password');
    const passwordConfirmationInput = document.getElementById('password_confirmation');
    const passwordErr = document.getElementById('password-error-msg');
    const confirmationErr = document.getElementById('password-confirmation-error-msg');

    function validate() {
      let valid = true;
      // Hide error messages first
      if (passwordErr) passwordErr.style.display = "none";
      if (confirmationErr) confirmationErr.style.display = "none";

      if (!isValidPassword(passwordInput.value)) {
        if (passwordErr) {
          passwordErr.textContent = "รหัสผ่านใช้ได้เฉพาะภาษาอังกฤษ (a-z, A-Z), ตัวเลข (0-9) และอักขระพิเศษ";
          passwordErr.style.display = "block";
        }
        valid = false;
      }
      if (!isValidPassword(passwordConfirmationInput.value)) {
        if (confirmationErr) {
          confirmationErr.textContent = "รหัสผ่านยืนยันใช้ได้เฉพาะภาษาอังกฤษ (a-z, A-Z), ตัวเลข (0-9) และอักขระพิเศษ";
          confirmationErr.style.display = "block";
        }
        valid = false;
      }
      return valid;
    }
    form.addEventListener('submit', function(e) {
      if (!validate()) {
        e.preventDefault();
      }
    });
    passwordInput.addEventListener('input', validate);
    passwordConfirmationInput.addEventListener('input', validate);
  });
</script>
@endpush
@endsection