@extends('layouts.app')

@section('title', 'Reset Password - ' . \App\Models\Setting::get('site_name', 'KiyoKart'))

@section('content')
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-5">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">Reset Password</h4>
            </div>
            <div class="card-body">
                @if(!session('show_reset'))
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i> Please request a password reset OTP first.
                    </div>
                    <div class="text-center">
                        <a href="{{ route('password.forgot') }}" class="btn btn-primary">
                            <i class="bi bi-arrow-left"></i> Go to Forgot Password
                        </a>
                    </div>
                @else
                    <form action="{{ route('password.reset') }}" method="POST">
                        @csrf
                        <input type="hidden" name="mobile" value="{{ session('mobile') }}">

                        <div class="mb-3">
                            <label class="form-label">Mobile Number</label>
                            <div class="input-group">
                                <span class="input-group-text">+91</span>
                                <input type="text" class="form-control" value="{{ session('mobile') }}" disabled>
                            </div>
                            <small class="text-muted">OTP sent to this number</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Enter OTP</label>
                            <input type="text" name="otp" class="form-control @error('otp') is-invalid @enderror" 
                                   placeholder="6-digit OTP" maxlength="6" required autofocus>
                            @error('otp')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Enter the 6-digit OTP sent to your mobile</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">New Password</label>
                            <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" 
                                   placeholder="Enter new password" required>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Minimum 8 characters</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Confirm Password</label>
                            <input type="password" name="password_confirmation" class="form-control" 
                                   placeholder="Confirm new password" required>
                        </div>

                        <button type="submit" class="btn btn-success w-100 mb-2">
                            <i class="bi bi-check-circle"></i> Reset Password
                        </button>
                    </form>

                    <form action="{{ route('password.forgot') }}" method="POST" class="text-center">
                        @csrf
                        <input type="hidden" name="mobile" value="{{ session('mobile') }}">
                        <button type="submit" class="btn btn-link p-0">
                            Resend OTP
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection