@extends('layouts.main')

@section('title', 'Your Cart')

@section('style')

@endsection


@section('content')
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card shadow-lg">
          <div class="card-header bg-primary text-white text-center">
            <h4>OTP Verification</h4>
          </div>
          <div class="card-body">
            <form method="POST" action="{{ route('checkout.otp.verify') }}">
              {{-- Hidden Fields from Previous Request --}}
              @csrf
              @foreach ($requestData as $key => $value)
                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
              @endforeach

              {{-- OTP Input --}}
              <div class="mb-3">
                <label for="otp" class="form-label">Enter the OTP sent to your mobile {{maskMobile(Auth::user()->mobile)}}</label>
                <input type="text" name="otp" id="otp" maxlength="6"
                  class="form-control @error('otp') is-invalid @enderror" required pattern="\d{6}">
                @error('otp')
                  <div class="text-danger">{{ $message }}</div>
                @enderror
                @if(isset($error) && $error != "")
                  <div class="text-danger">{{ $error }}</div>
                @endif
              </div>

              {{-- Timer + Resend Button --}}
              <div class="mb-3 d-flex justify-content-between align-items-center">
                <button type="button" id="resendOtpBtn" class="btn btn-outline-secondary" disabled>Resend OTP (<span
                    id="timer">120s</span>)</button>
                <button type="submit" class="btn btn-success">Verify OTP</button>
              </div>

              {{-- Message Display --}}
              @if (session('error'))
                <div class="alert alert-danger mt-3">{{ session('error') }}</div>
              @endif
              @if (session('success'))
                <div class="alert alert-success mt-3">{{ session('success') }}</div>
              @endif
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('script')
  <script>
    $(document).ready(function() {
      let timer = 120;
      let interval = setInterval(updateTimer, 1000);

      function updateTimer() {
        if (timer > 0) {
          timer--;
          $('#timer').text(timer + 's');
        } else {
          clearInterval(interval);
          $('#resendOtpBtn').prop('disabled', false).text("Resend OTP");
        }
      }

      function showAlert(message, color) {
        const alertDiv = `<div class="alert alert-${color} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>`;
        $('.card-body').prepend(alertDiv);
      }

      $('#resendOtpBtn').click(function() {
        let $btn = $(this);
        $btn.prop('disabled', true).html("Resending...");

        $.ajax({
          url: "{{ route('checkout.otp.resend') }}",
          type: "POST",
          data: {
            _token: "{{ csrf_token() }}"
          },
          success: function(response) {
            if (response.status === 'success') {
              showAlert("OTP resent successfully.", "success");
              timer = 120;
              $btn.html('Resend OTP (<span id="timer">120s</span>)').prop('disabled', true);
              interval = setInterval(updateTimer, 1000);
            } else {
              showAlert(response.message, "danger");
              $btn.prop('disabled', false).text("Resend OTP");
            }
          },
          error: function() {
            showAlert("Something went wrong. Please try again.", "danger");
            $btn.prop('disabled', false).text("Resend OTP");
          }
        });
      });
    });
  </script>
@endsection