@extends('user.layouts.app')

@push('styles')
<style>
  .resend-otp-link,
  .go-back-link {
    display: block;
    margin-top: 10px;
    color: #002B10;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
  }

  .resend-otp-link:hover,
  .go-back-link:hover {
    text-decoration: underline;
  }

  .hideOtp {
    display: none;
  }

  .hide-step-title {
    display: none;
  }

  .digit-group-section {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 12px;
  }

  .digit-group-section input {
    width: 48px;
    height: 56px;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #002B10;
    background: #fff;
  }

  .digit-group-section input:focus {
    outline: none;
    border-color: #002B10;
    box-shadow: 0 0 0 3px rgba(0, 43, 16, 0.12);
  }

  .timer {
    text-align: center;
    color: #002B10;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .otp-helper-text {
    text-align: center;
    color: #5f5f5f;
    margin-bottom: 4px;
  }

  @media (max-width: 575px) {
    .digit-group-section {
      gap: 8px;
    }

    .digit-group-section input {
      width: 42px;
      height: 50px;
      font-size: 22px;
    }
  }
</style>
@endpush

@section('body_class', 'change-password')

@section('content')
<div class="container login-wrapper d-flex align-items-center justify-content-center">
  <div class="row w-100 justify-content-center">
    <div class="member-login-box">
      <div class="row g-0 login-card">
        <div class="col-md-12 login-show-box">
          @if(Session::has('success'))
          <p class="alert alert-success">{{ Session::get('success') }}</p>
          @endif

          <div class="member-login">
            <div class="padlock">
              <div class="padlock-icon">
                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 1059" width="780" height="1059">
                  <title>68aca3a8-80dd-403c-88a9-d444655ec042</title>
                  <style>
                    .s0 {
                      fill: #ffffff
                    }
                  </style>
                  <g id="Objects">
                    <path id="&lt;Compound Path&gt;" fill-rule="evenodd" class="s0" d="m760.1 483.8v456c0 58.7-47.5 106.2-106.2 106.2h-520.9c-58.6 0-106.1-47.5-106.1-106.2v-456c0-58.7 47.5-106.2 106.1-106.2h28.9v-128.1c0-31.2 6.2-61.5 18.2-90.1 11.7-27.6 28.4-52.3 49.6-73.6 21.3-21.2 46.1-37.9 73.6-49.6 28.6-12.1 58.9-18.2 90.2-18.2 31.2 0 61.5 6.1 90.1 18.2 27.6 11.7 52.4 28.4 73.6 49.6 21.3 21.3 37.9 46 49.6 73.6 12.1 28.6 18.2 58.9 18.2 90.1v128.1h28.9c58.7 0 106.2 47.5 106.2 106.2zm-275 174.8c0-50.6-41-91.6-91.6-91.6-50.6 0-91.7 41-91.7 91.6 0 38.6 23.8 71.6 57.5 85.1v78.7c0 18.9 15.3 34.2 34.2 34.2 18.8 0 34.1-15.3 34.1-34.2v-78.7c33.7-13.5 57.5-46.5 57.5-85.1zm40.4-409.1c0-35.2-13.7-68.4-38.7-93.3-24.9-24.9-58.1-38.7-93.3-38.7-35.3 0-68.4 13.8-93.4 38.7-24.9 24.9-38.7 58.1-38.7 93.3v128.1h264.1z" />
                  </g>
                </svg>
              </div>
            </div>
            <div class="verify-wrap">
              <h3 class="text-center" id="changePasswordTitle">Change Password</h3>
            </div>
            <div class="change-content">
              <div class="tab-pane change-password-panel">
                <form method="POST" action="{{ route('user.changePassword') }}" id="changePasswordForm">
                  @csrf
                  <div class="form-row box-focus">
                    <label for="password-type">New Password</label>
                    <input type="password" name="password" value="{{ old('password') }}" class="form-control" id="password-type" required />
                    <span toggle="#password-type" class="field-icon toggle-password"></span>
                  </div>
                  @error('password')
                  <p class="text-danger small mt-1">{{ $message }}</p>
                  @enderror

                  <div class="form-row box-focus">
                    <label for="password-retype">Retype New Password</label>
                    <input type="password" name="password_confirmation" value="{{ old('password_confirmation') }}" class="form-control" id="password-retype" required />
                    <span toggle="#password-retype" class="field-icon toggle-password"></span>
                  </div>
                  @error('password_confirmation')
                  <p class="text-danger small mt-1">{{ $message }}</p>
                  @enderror

                  <div class="login-btn-outer">
                    <button type="button" class="btn btn-primary" id="verifyOtpAndChangePassword">Submit</button>
                  </div>
                </form>
              </div>

              <div class="get-otp-outer hideOtp" id="changePasswordOtpSection">
                <h3 class="text-center">Enter Verification Code</h3>
                <div class="sub-text otp-helper-text">
                  <p id="changePasswordOtpMessage">Please enter the verification code we sent.</p>
                </div>
                <form action="{{ route('user.changePassword') }}" method="POST" id="changePasswordOtpForm" class="digit-group-form" autocomplete="off">
                  @csrf
                  <div class="digit-group-section">
                    <input type="text" id="digit-1" name="digit-1" inputmode="numeric" maxlength="1" data-next="digit-2" />
                    <input type="text" id="digit-2" name="digit-2" inputmode="numeric" maxlength="1" data-next="digit-3" data-previous="digit-1" />
                    <input type="text" id="digit-3" name="digit-3" inputmode="numeric" maxlength="1" data-next="digit-4" data-previous="digit-2" />
                    <input type="text" id="digit-4" name="digit-4" inputmode="numeric" maxlength="1" data-next="digit-5" data-previous="digit-3" />
                    <input type="text" id="digit-5" name="digit-5" inputmode="numeric" maxlength="1" data-previous="digit-4" />
                  </div>
                  <div id="changePasswordOtpTimer" class="timer">Resend in <strong>00:20</strong></div>
                  <a href="javascript:void(0)" id="changePasswordResendOtpLink" class="resend-otp-link" style="display: none;">Resend OTP</a>
                  <div class="login-btn-outer">
                    <button type="submit" class="btn btn-primary" id="changePasswordVerifyOtpBtn">Verify OTP</button>
                  </div>
                  <a href="javascript:void(0)" id="changePasswordGoBack" class="go-back-link">Go Back</a>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<script>
  let changePasswordCountdownTimer;
  let changePasswordTimeLeft = 20;

  function getOtpChannelTitle(sentVia) {
    if (sentVia?.sms && sentVia?.email) {
      // return 'OTP Sent to Phone and Email';
      return 'Success';
    }

    if (sentVia?.sms) {
      return 'OTP Sent to Phone';
    }

    if (sentVia?.email) {
      return 'OTP Sent to Email';
    }

    return 'OTP Sent';
  }

  function clearChangePasswordOtpFields() {
    for (let i = 1; i <= 5; i++) {
      const input = document.getElementById('digit-' + i);
      if (input) {
        input.value = '';
      }
    }

    document.getElementById('digit-1')?.focus();
  }

  function showChangePasswordOtpSection(message) {
    document.querySelector('.change-password-panel')?.classList.add('hideOtp');
    document.getElementById('changePasswordOtpSection')?.classList.remove('hideOtp');
    document.getElementById('changePasswordTitle')?.classList.add('hide-step-title');

    const otpMessage = document.getElementById('changePasswordOtpMessage');
    if (otpMessage && message) {
      otpMessage.textContent = message;
    }

    clearChangePasswordOtpFields();
  }

  function showChangePasswordFormSection() {
    document.querySelector('.change-password-panel')?.classList.remove('hideOtp');
    document.getElementById('changePasswordOtpSection')?.classList.add('hideOtp');
    document.getElementById('changePasswordTitle')?.classList.remove('hide-step-title');
    clearInterval(changePasswordCountdownTimer);
  }

  function startChangePasswordCountdown() {
    clearInterval(changePasswordCountdownTimer);
    changePasswordTimeLeft = 20;

    const timerEl = document.getElementById('changePasswordOtpTimer');
    const resendLink = document.getElementById('changePasswordResendOtpLink');

    if (!timerEl || !resendLink) {
      return;
    }

    resendLink.style.display = 'none';
    timerEl.innerHTML = 'Resend in <strong>00:20</strong>';

    changePasswordCountdownTimer = setInterval(function () {
      changePasswordTimeLeft--;
      timerEl.innerHTML = `Resend in <strong>00:${changePasswordTimeLeft < 10 ? '0' + changePasswordTimeLeft : changePasswordTimeLeft}</strong>`;

      if (changePasswordTimeLeft <= 0) {
        clearInterval(changePasswordCountdownTimer);
        timerEl.innerHTML = 'You can now request a new OTP.';
        resendLink.style.display = 'block';
      }
    }, 1000);
  }

  async function sendChangePasswordOtpRequest(password, passwordConfirmation) {
    const response = await fetch("{{ route('user.sendChangePasswordOtp') }}", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
      },
      body: JSON.stringify({
        password: password,
        password_confirmation: passwordConfirmation
      })
    });

    return response.json();
  }

  document.addEventListener('DOMContentLoaded', function () {
    const submitBtn = document.getElementById('verifyOtpAndChangePassword');
    const form = document.getElementById('changePasswordForm');
    const otpForm = document.getElementById('changePasswordOtpForm');
    const resendOtpLink = document.getElementById('changePasswordResendOtpLink');
    const goBackLink = document.getElementById('changePasswordGoBack');
    const otpInputs = Array.from(document.querySelectorAll('#changePasswordOtpSection .digit-group-section input'));
    const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/;

    otpInputs.forEach((input) => {
      input.addEventListener('input', function () {
        this.value = this.value.replace(/\D/g, '').slice(0, 1);

        if (this.value && this.dataset.next) {
          document.getElementById(this.dataset.next)?.focus();
        }
      });

      input.addEventListener('keydown', function (e) {
        if (e.key === 'Backspace' && !this.value && this.dataset.previous) {
          document.getElementById(this.dataset.previous)?.focus();
        }
      });

      input.addEventListener('paste', function (e) {
        e.preventDefault();

        const pastedValue = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '').slice(0, 5);
        if (!pastedValue) {
          return;
        }

        otpInputs.forEach((field, index) => {
          field.value = pastedValue[index] || '';
        });

        const focusIndex = Math.min(pastedValue.length, otpInputs.length) - 1;
        otpInputs[Math.max(focusIndex, 0)]?.focus();
      });
    });

    if (goBackLink) {
      goBackLink.addEventListener('click', function () {
        showChangePasswordFormSection();
      });
    }

    if (resendOtpLink) {
      resendOtpLink.addEventListener('click', async function () {
        resendOtpLink.style.pointerEvents = 'none';
        resendOtpLink.textContent = 'Sending...';

        try {
          const password = document.getElementById('password-type').value;
          const passwordConfirmation = document.getElementById('password-retype').value;
          const otpData = await sendChangePasswordOtpRequest(password, passwordConfirmation);

          if (otpData.status !== 'success') {
            Swal.fire({
              icon: 'error',
              title: 'Error',
              text: otpData.message || 'Unable to resend OTP.',
              confirmButtonText: 'OK'
            });
            return;
          }

          Swal.fire({
            icon: 'success',
            title: getOtpChannelTitle(otpData.sent_via),
            text: otpData.delivery_message || otpData.message,
            confirmButtonText: 'OK'
          });

          showChangePasswordOtpSection(otpData.delivery_message || otpData.message);
          clearChangePasswordOtpFields();
          startChangePasswordCountdown();
        } catch (error) {
          Swal.fire({
            icon: 'error',
            title: 'Server Error',
            text: 'An error occurred while resending OTP.',
            confirmButtonText: 'OK'
          });
        } finally {
          resendOtpLink.style.pointerEvents = '';
          resendOtpLink.textContent = 'Resend OTP';
        }
      });
    }

    if (submitBtn && form) {
      submitBtn.addEventListener('click', async function () {
        const password = document.getElementById('password-type').value;
        const passwordConfirmation = document.getElementById('password-retype').value;

        if (!password || !passwordConfirmation) {
          Swal.fire({
            icon: 'warning',
            title: 'Missing Information',
            text: 'Please enter new password and retype password.',
            confirmButtonText: 'OK'
          });
          return;
        }

        if (password.length < 8) {
          Swal.fire({
            icon: 'warning',
            title: 'Invalid Password',
            text: 'Password must be at least 8 characters.',
            confirmButtonText: 'OK'
          });
          return;
        }

        if (!passwordPattern.test(password)) {
          Swal.fire({
            icon: 'warning',
            title: 'Invalid Password',
            text: 'Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.',
            confirmButtonText: 'OK'
          });
          return;
        }

        if (password !== passwordConfirmation) {
          Swal.fire({
            icon: 'error',
            title: 'Password Mismatch',
            text: 'Retype password does not match with new password.',
            confirmButtonText: 'OK'
          });
          return;
        }

        submitBtn.disabled = true;
        submitBtn.innerText = 'Sending OTP...';

        try {
          const password = document.getElementById('password-type').value;
          const passwordConfirmation = document.getElementById('password-retype').value;
          const otpData = await sendChangePasswordOtpRequest(password, passwordConfirmation);

          if (otpData.status !== 'success') {
            Swal.fire({
              icon: 'error',
              title: 'Error',
              text: otpData.message || 'Unable to send OTP.',
              confirmButtonText: 'OK'
            });
            return;
          }

          await Swal.fire({
            icon: 'success',
            title: getOtpChannelTitle(otpData.sent_via),
            text: otpData.delivery_message || otpData.message,
            confirmButtonText: 'OK'
          });

          showChangePasswordOtpSection(otpData.delivery_message || otpData.message);
          startChangePasswordCountdown();
        } catch (error) {
          Swal.fire({
            icon: 'error',
            title: 'Server Error',
            text: 'An error occurred while processing your request.',
            confirmButtonText: 'OK'
          });
        } finally {
          submitBtn.disabled = false;
          submitBtn.innerText = 'Submit';
        }
      });
    }

    if (otpForm && form) {
      otpForm.addEventListener('submit', async function (e) {
        e.preventDefault();

        const password = document.getElementById('password-type').value;
        const passwordConfirmation = document.getElementById('password-retype').value;
        const otp = otpInputs.map((input) => input.value).join('');
        const verifyOtpBtn = document.getElementById('changePasswordVerifyOtpBtn');

        if (!/^\d{5}$/.test(otp)) {
          Swal.fire({
            icon: 'warning',
            title: 'Invalid OTP',
            text: 'Please enter a valid 5-digit OTP.',
            confirmButtonText: 'OK'
          });
          clearChangePasswordOtpFields();
          return;
        }

        verifyOtpBtn.disabled = true;
        verifyOtpBtn.innerText = 'Verifying...';

        try {
          const changePasswordResponse = await fetch(form.action, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json',
              'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            },
            body: JSON.stringify({
              password: password,
              password_confirmation: passwordConfirmation,
              otp: otp
            })
          });

          const changePasswordData = await changePasswordResponse.json();

          if (changePasswordResponse.ok && changePasswordData.status === 'success') {
            await Swal.fire({
              icon: 'success',
              title: 'Success',
              text: changePasswordData.message,
              confirmButtonText: 'OK'
            });

            form.reset();
            clearChangePasswordOtpFields();
            window.location.reload();
            return;
          }

          let errorMessage = changePasswordData.message || 'Unable to change password.';
          if (changePasswordData.errors) {
            const firstError = Object.values(changePasswordData.errors)[0];
            errorMessage = Array.isArray(firstError) ? firstError[0] : firstError;
          }

          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: errorMessage,
            confirmButtonText: 'OK'
          });

          clearChangePasswordOtpFields();
        } catch (error) {
          Swal.fire({
            icon: 'error',
            title: 'Server Error',
            text: 'An error occurred while processing your request.',
            confirmButtonText: 'OK'
          });
        } finally {
          verifyOtpBtn.disabled = false;
          verifyOtpBtn.innerText = 'Verify OTP';
        }
      });
    }
  });

  let slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
    showSlides(slideIndex = n);
  }

  function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
      slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
  }
</script>
@endpush