@extends('layouts/blankLayout')

@section('title', 'User Forgot Password')

@section('page-style')
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <style>
    body {
      background-color: #f4f6f9;
    }

    .logo-img {
      height: 54px;
      width: auto;
    }

    .brand-row {
      display: flex;
      align-items: center;
      justify-content: center;
      /* centered */
      gap: 12px;
      text-align: center;
      margin-bottom: .25rem;
    }

    .brand-text {
      font-weight: 500;
      letter-spacing: -.02em;
      font-size: 1.05rem;
      color: var(--text);
      line-height: 1.1;
    }

    .title {
      font-weight: 950;
      letter-spacing: -.03em;
      margin: 1rem 0 .25rem;
      text-align: center;
      /* SIGN IN centered */
      color: var(--text);
    }

    .subtitle {
      color: var(--muted);
      margin: 0;
      text-align: center;
      /* centered subtitle */
    }
    .card-custom-height {
      min-height: 500px !important;
    }
  </style>
@endsection

@section('content')
  <div class="auth-maintenance d-flex align-items-center min-vh-100">
    <div class="bg-overlay bg-light"></div>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-10">
          <div class="auth-full-page-content d-flex min-vh-100 py-sm-5 py-4">
            <div class="w-100">
              <div class="d-flex flex-column h-100 py-0 py-xl-3">
                <div class="text-center mb-4">
                  <div class="brand-row">
                    <img src="{{ asset('assets/img/logo.png') }}" alt="Logo" class="logo-img">
                  </div>
                  <div class="brand-text text-center">Payin • Payout • Provider Dashboard</div>
                </div>

                <div class="card h-100 my-auto overflow-hidden">
                  <div class="row g-0">
                    <div class="col-lg-6">
                      <div class="bg-overlay bg-primary"></div>
                      <div class="h-100 bg-auth align-items-end">
                      </div>
                    </div>

                    <div class="col-lg-6 card-custom-height">
                      <div class="p-lg-5 p-4">
                        <div>
                          <div class="text-center mt-1">
                            <h3 class="font-size-18">User Password Recovery</h3>
                          </div>

                          @if ($errors->any())
                            <div class="alert alert-danger pb-0"><ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
                          @endif
                          @if (session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                          @endif

                          @if (session('newPassword'))
                            <div class="text-center">
                              <p>Your password has been reset successfully.</p>
                              <div id="newPasswordBox" class="p-3 my-3 rounded">
                                <p class="mb-1 small">Use this password to login:</p>
                                <div class="d-flex align-items-center justify-content-center">
                                  <span id="generatedPassword" class="me-3 fw-bold">{{ session('newPassword') }}</span>
                                  <button class="btn btn-outline-secondary btn-sm" onclick="copyPassword()">Copy</button>
                                </div>
                              </div>
                              <p class="fw-bold mt-3">Note: Please change this password after you log in.</p>
                              <a href="{{ url('/login') }}" class="btn btn-primary w-100 mt-2">Go to Login</a>
                            </div>
                          @else
                            <form method="POST" action="{{ route('password.user.handle') }}" class="auth-input ">
                              @csrf
                              <div class="mb-3">
                                <label for="identifier" class="form-label">Register Phone Number</label>
                                <input type="text" class="form-control" name="identifier" value="{{ session('identifierForOtp', old('identifier')) }}" @if(session('showOtpInput')) readonly @endif required>
                              </div>
                              @if (session('showOtpInput'))
                                <div class="mb-4">
                                  <label for="otp" class="form-label">4-Digit OTP</label>
                                  <input type="text" class="form-control" name="otp" placeholder="Enter OTP" required autofocus>
                                </div>
                                <button type="submit" class="btn btn-primary w-100">Verify OTP & Reset</button>
                              @else
                                <button type="submit" class="btn btn-primary w-100 mt-4">Send OTP</button>
                              @endif
                            </form>
                          @endif
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('js')
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    function copyPassword() {
      navigator.clipboard.writeText(document.getElementById("generatedPassword").innerText)
        .then(() => alert("Password copied!"));
    }
  </script>
@endsection