@extends('frontEnd.layouts.master')
@section('title','Reset Password')
@php
    $generalsetting = \App\Models\GeneralSetting::first();
    $navLogo = $generalsetting?->white_logo;
    if ($navLogo && !Str::startsWith($navLogo, ['http', 'https'])) {
        $navLogo = ltrim(str_ireplace(['/public/', 'public/'], '', $navLogo), '/');
    }
    $forgotCustomer = \App\Models\Customer::where('phone', session('verify_phone'))->first();
    $smsGw  = \App\Models\SmsGateway::first();
    $smsOn  = $smsGw && (int)$smsGw->status === 1;
    $sentTo = ($smsOn || !$forgotCustomer?->email)
        ? 'your phone'
        : 'your email (' . \Illuminate\Support\Str::mask($forgotCustomer->email, '*', 2, -strlen(strstr($forgotCustomer->email, '@')) - 2) . ')';
@endphp
@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
    :root { --amz-blue: #007185; --amz-err: #B12704; }
    body { background-color: #fff; }
    .auth-wrap { background:#fff; min-height:85vh; display:flex; flex-direction:column; align-items:center; padding:30px 15px; font-family:'Inter',sans-serif; }
    .auth-box  { width:100%; max-width:350px; }
    .logo-wrap { margin-bottom:18px; display:flex; justify-content:center; }
    .auth-logo { max-height:40px; object-fit:contain; }
    .auth-card { background:#fff; padding:20px 26px; border-radius:8px; border:1px solid #ddd; text-align:left; }
    .auth-title { font-size:28px; font-weight:400; color:#111; margin:0 0 10px; letter-spacing:-0.5px; }
    .instruction { font-size:13px; line-height:1.5; margin-bottom:20px; color:#111; }
    .input-label { display:block; font-size:13px; font-weight:700; margin-bottom:4px; color:#111; }
    .a-input { width:100%; height:34px; padding:0 10px; border:1px solid #888C8C; border-radius:4px; font-size:14px; outline:none; transition:0.2s; margin-bottom:15px; box-sizing:border-box; box-shadow:0 1px 2px rgba(15,17,17,.15) inset; }
    .a-input:focus { border-color:#e77600; box-shadow:0 0 3px 2px rgba(228,121,17,.5); }
    .a-btn { width:100%; padding:8px; background:#FFD814; border:1px solid #FCD200; border-radius:8px; font-weight:400; font-size:13px; color:#111; cursor:pointer; transition:0.1s; margin-top:5px; display:block; box-shadow:0 2px 5px 0 rgba(213,217,217,.5); }
    .a-btn:hover { background:#f7ca00; border-color:#f2c200; }
    .a-btn:disabled { opacity:0.6; cursor:not-allowed; }
    .step { display:none; }
    .step.active { display:block; }
    .pass-wrap { position:relative; margin-bottom:15px; }
    .pass-wrap .a-input { margin-bottom:0; padding-right:38px; }
    .pass-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#888; padding:0; font-size:15px; }
</style>

<section class="auth-wrap">
    <div class="auth-box">
        <div class="auth-card">
            <div class="logo-wrap">
                <a href="{{ url('/') }}">
                    <img src="{{ asset($navLogo ?? 'public/logo.png') }}" alt="Logo" class="auth-logo">
                </a>
            </div>

            {{-- STEP 1: Verify OTP --}}
            <div id="fr1" class="step active">
                <h1 class="auth-title">Verify code</h1>
                <p class="instruction">We've sent a verification code to {{ $sentTo }}.</p>
                <label class="input-label">Verification code</label>
                <input type="text" id="fr_otp" class="a-input" placeholder="Enter 4-digit code" maxlength="4" inputmode="numeric">
                <button type="button" id="btn_fr1" class="a-btn">
                    Verify <span class="spinner-border spinner-border-sm d-none ms-2"></span>
                </button>
                <div style="margin-top:15px; text-align:center;">
                    <form action="{{ route('customer.forgot.resendotp') }}" method="POST" style="display:inline;">
                        @csrf
                        <button style="background:none; border:none; color:var(--amz-blue); font-size:13px; cursor:pointer;">Resend code</button>
                    </form>
                </div>
            </div>

            {{-- STEP 2: New Password --}}
            <div id="fr2" class="step">
                <h1 class="auth-title">New password</h1>
                <p class="instruction">OTP verified. Set your new password below.</p>
                <form action="{{ route('customer.forgot.store') }}" method="POST">
                    @csrf
                    <label class="input-label">New password</label>
                    <div class="pass-wrap">
                        <input type="password" id="fr_pass" name="password" class="a-input" placeholder="At least 6 characters" required>
                        <button type="button" class="pass-toggle" onclick="togglePass('fr_pass', this)">
                            <i class="fa-regular fa-eye"></i>
                        </button>
                    </div>
                    <label class="input-label">Confirm password</label>
                    <div class="pass-wrap">
                        <input type="password" id="fr_pass2" class="a-input" placeholder="Re-enter password">
                        <button type="button" class="pass-toggle" onclick="togglePass('fr_pass2', this)">
                            <i class="fa-regular fa-eye"></i>
                        </button>
                    </div>
                    <button type="submit" id="btn_fr2" class="a-btn">Reset Password</button>
                </form>
            </div>

        </div>
    </div>
</section>
@endsection

@push('script')
<script>
function togglePass(id, btn) {
    var inp = document.getElementById(id);
    var icon = btn.querySelector('i');
    if (inp.type === 'password') {
        inp.type = 'text';
        icon.className = 'fa-regular fa-eye-slash';
    } else {
        inp.type = 'password';
        icon.className = 'fa-regular fa-eye';
    }
}

$('#btn_fr1').on('click', function() {
    var otp = $('#fr_otp').val().trim();
    if (otp.length < 4) { toastr.error('Please enter the 4-digit code'); return; }
    var btn = $(this);
    btn.prop('disabled', true).find('.spinner-border').removeClass('d-none');

    $.post("{{ route('customer.forgot.verify_otp') }}", {
        _token: "{{ csrf_token() }}",
        otp: otp
    })
    .done(function(res) {
        btn.prop('disabled', false).find('.spinner-border').addClass('d-none');
        if (res.success) {
            toastr.success('Code verified!');
            $('.step').removeClass('active');
            $('#fr2').addClass('active');
        } else {
            toastr.error(res.message || 'Incorrect code');
        }
    })
    .fail(function(xhr) {
        btn.prop('disabled', false).find('.spinner-border').addClass('d-none');
        toastr.error(xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Something went wrong');
    });
});

// Confirm password check before submit
$('#btn_fr2').closest('form').on('submit', function(e) {
    var p1 = $('#fr_pass').val();
    var p2 = $('#fr_pass2').val();
    if (p1.length < 6) { e.preventDefault(); toastr.error('Password must be at least 6 characters'); return; }
    if (p1 !== p2)     { e.preventDefault(); toastr.error('Passwords do not match'); return; }
});

$('#fr_otp').on('keypress', function(e) {
    if (e.which === 13) $('#btn_fr1').click();
});
</script>
@endpush
