@extends('layoutsteacher.layouts')
@section('content')
<link href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" rel="stylesheet">
<style>
    .profile-card {
        background-color: #fff;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        max-width: 1200px;
        margin: 0 auto;
        /* margin-top: 40px; */
        height: 580px;
    }
    .profile-header {
        text-align: center;
        margin-bottom: 30px;
    }
    .profile-header img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #e6f3fc;
        display: block;
        margin: 0 auto;
    }
    .profile-header .edit-icon {
        position: relative;
        top: -30px;
        left: 35px;
        font-size: 18px;
        color: #26aaf7;
        cursor: pointer;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .form-label {
        font-weight: 600;
        color: #0D1B4C;
    }
    .form-control {
        border-radius: 10px;
        border: 1px solid #e3e6ed;
        padding: 14px;
        font-size: 16px;
    }
    .change-password-link {
        text-align: right;
        display: block;
        margin-top: 10px;
        color: #26aaf7;
    }
  .modal-xl {
    max-width: 950px; /* You can adjust this */
  }

  .modal-body .form-control {
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 16px;
  }

  .modal-body ul i {
    font-size: 20px;
    position: relative;
    top: 2px;
  }
</style>

<div class="profile-card">
    <h3 class="pb-4">ข้อมูลส่วนตัว</h3>
    <!-- <div class="profile-header">
        <img src="{{ asset('images/profile-default.png') }}" alt="profile" />
        <i class="uil uil-edit edit-icon"></i>
    </div> -->

    <form method="POST" class="h-100" id="profileForm" enctype="multipart/form-data">
        @csrf
        <div class="text-center mb-4">
        <div class="position-relative d-inline-block">
            <img id="previewImage" 
                 src="{{ $teacher->profile_image_url ?? asset('images/default-profile.png') }}" 
                 alt="Profile Image" 
                 class="rounded-circle" 
                 style="width: 120px; height: 120px; object-fit: cover; border: 3px solid #ccc;">
            <input type="file" 
                   name="profile_image" 
                   accept="image/*" 
                   class="form-control mt-2" 
                   style="width: 200px; margin: 0 auto;" 
                   onchange="previewProfileImage(event)">
        </div>
    </div>
        <div class="row">
            <div class="col-md-6 form-group">
                <label class="form-label">ชื่อ</label>
                <input type="text" class="form-control" name="firstname" value="{{ $teachers->firstname }}">
            </div>
            <div class="col-md-6 form-group">
                <label class="form-label">นามสกุล</label>
                <input type="text" class="form-control" name="lastname" value="{{ $teachers->lastname }}">
            </div>
            <div class="col-md-6 form-group">
                <label class="form-label">อีเมลล์</label>
                <input type="email" class="form-control" name="email" value="{{ $teachers->email }}">
            </div>
            <div class="col-md-6 form-group">
                <label class="form-label">เบอร์โทรศัพท์</label>
                <input type="text" class="form-control" name="phone" value="{{ $teachers->phone }}">
            </div>
            <div class="col-md-12 form-group">
                <label class="form-label">ชื่อผู้ใช้</label>
                <input type="text" class="form-control" name="username" value="{{ $teachers->username }}" readonly>
            </div>
        </div>
        <div class="text-end mt-3">
            <a href="#" class="change-password-link" data-bs-toggle="modal" data-bs-target="#changePasswordModal">เปลี่ยนรหัสผ่าน</a>

        </div>
        <div class="pt-5"></div>
        <button type="submit" class="btn btn-primary w-100 mt-3">บันทึก</button>
    </form>
</div>

<!-- Modal: Change Password -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content" style="border-radius: 16px; overflow: hidden;">
      <div class="modal-header border-0 px-4 pt-4">
        <h5 class="modal-title" id="changePasswordModalLabel">เปลี่ยนรหัสผ่าน</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body pt-0 px-4 pb-4">
        <form id="passwordChangeForm">
          @csrf
          <div class="row" style="min-height: 420px;">
            <!-- Left: Form -->
            <div class="col-md-6 pt-5" style="padding-right: 40px;">
              <div class="mb-3">
                <label class="form-label">รหัสผ่านเดิม</label>
                <input type="password" class="form-control" name="current_password" required>
              </div>
              <div class="mb-3">
                <label class="form-label">รหัสผ่านใหม่</label>
                <input type="password" class="form-control" name="new_password" required>
              </div>
              <div class="mb-3">
                <label class="form-label">ยืนยันรหัสผ่านใหม่</label>
                <input type="password" class="form-control" name="new_password_confirmation" required>
              </div>
            </div>

            <!-- Right: Requirement Notes -->
            <div class="col-md-6 d-flex align-items-start pt-5" style="border-left: 1px solid #C3D3E2;">
                <ul class="list-unstyled ms-4">
                    <li id="rule-length" class="mb-3"><i class="bi bi-check-circle me-2"></i>รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร</li>
                    <li id="rule-complex" class="mb-3"><i class="bi bi-check-circle me-2"></i>ต้องมีอักษรพิมพ์เล็ก พิมพ์ใหญ่ ตัวเลข และอักขระพิเศษ</li>
                    <li id="rule-not-same" class="mb-3"><i class="bi bi-check-circle me-2"></i>รหัสผ่านใหม่ต้องไม่ซ้ำกับรหัสผ่านเดิมล่าสุด</li>
                    <li id="rule-match" class="mb-3"><i class="bi bi-check-circle me-2"></i>คุณกรอกยืนยันรหัสผ่านอีกครั้งเพื่อความถูกต้อง</li>
                </ul>

            </div>
          </div>

          <div class="text-end mt-4">
            <button id="savePasswordBtn" type="submit" class="btn btn-primary" disabled>ยืนยันการเปลี่ยนรหัสผ่าน</button>

          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<script>
document.getElementById('profileForm').addEventListener('submit', function (e) {
    e.preventDefault();

    const token = localStorage.getItem('token');
    const formData = new FormData(this);

    fetch(`{{ route('teacher.profile.update') }}`, {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
        },
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success') {
            Swal.fire({
                icon: 'success',
                title: 'บันทึกข้อมูลสำเร็จ',
                confirmButtonText: 'ตกลง',
            }).then(() => {
                location.reload();
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'เกิดข้อผิดพลาด',
                text: data.message || 'ไม่สามารถบันทึกข้อมูลได้',
            });
        }
    })
    .catch(error => {
        console.error(error);
        Swal.fire({
            icon: 'error',
            title: 'เกิดข้อผิดพลาด',
            text: 'โปรดลองอีกครั้งภายหลัง',
        });
    });
});
const newPasswordInput = document.querySelector('input[name="new_password"]');
const confirmPasswordInput = document.querySelector('input[name="new_password_confirmation"]');
const currentPasswordInput = document.querySelector('input[name="current_password"]');
const savePasswordBtn = document.getElementById('savePasswordBtn');

function previewProfileImage(event) {
    const input = event.target;
    const reader = new FileReader();
    reader.onload = function(){
        const img = document.getElementById('previewImage');
        img.src = reader.result;
    };
    if(input.files[0]) {
        reader.readAsDataURL(input.files[0]);
    }
}

function updateValidation() {
  const newPass = newPasswordInput.value;
  const confirmPass = confirmPasswordInput.value;
  const currentPass = currentPasswordInput.value;

  const isLength = newPass.length >= 8;
  const hasLower = /[a-z]/.test(newPass);
  const hasUpper = /[A-Z]/.test(newPass);
  const hasDigit = /[0-9]/.test(newPass);
  const hasSpecial = /[!@#$%^&*(),.?":{}|<>_\-]/.test(newPass);
  const isComplex = hasLower && hasUpper && hasDigit && hasSpecial;
  const notSameAsOld = newPass !== '' && newPass !== currentPass;
  const isConfirmed = newPass !== '' && newPass === confirmPass;

  toggleRule('rule-length', isLength);
  toggleRule('rule-complex', isComplex);
  toggleRule('rule-not-same', notSameAsOld);
  toggleRule('rule-match', isConfirmed);

  // Enable submit only if all pass
  savePasswordBtn.disabled = !(isLength && isComplex && notSameAsOld && isConfirmed);
}

function toggleRule(id, condition) {
  const li = document.getElementById(id);
  const icon = li.querySelector('i');
  if (condition) {
    icon.classList.remove('text-muted');
    icon.classList.add('text-primary');
  } else {
    icon.classList.remove('text-primary');
    icon.classList.add('text-muted');
  }
}

[newPasswordInput, confirmPasswordInput, currentPasswordInput].forEach(input => {
  input.addEventListener('input', updateValidation);
});
document.getElementById('passwordChangeForm').addEventListener('submit', function (e) {
    e.preventDefault();

    // const token = localStorage.getItem('token');
    const formData = new FormData(this);

    fetch(`{{ route('teacher.password.update') }}`, {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${localStorage.getItem('token')}`,
        },
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success') {
            Swal.fire({
                icon: 'success',
                title: 'เปลี่ยนรหัสผ่านสำเร็จ',
                confirmButtonText: 'ตกลง',
            }).then(() => {
                document.getElementById('passwordChangeForm').reset();
                savePasswordBtn.disabled = true;
                const modal = bootstrap.Modal.getInstance(document.getElementById('changePasswordModal'));
                modal.hide();
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'เกิดข้อผิดพลาด',
                text: data.message || 'ไม่สามารถเปลี่ยนรหัสผ่านได้',
            });
        }
    })
    .catch(error => {
        console.error(error);
        Swal.fire({
            icon: 'error',
            title: 'เกิดข้อผิดพลาด',
            text: 'โปรดลองใหม่ภายหลัง',
        });
    });
});
</script>

@endsection