@extends('layouts.guest.app')

@section('content')
<section class="signup-section">
    <div class="container mt-5">
        <div class="row justify-content-center mt-5">
            <div class="col-md-8 mt-5">
                <div class="card mt-5">
                    <div class="card-header">{{ __('Reset Password') }}</div>

                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif
                        <form method="POST" action="{{ route('password.email') }}" id="emailResetForm">
                            @csrf
                            <div class="row justify-content-center">
                                <div class="col-md-11">
                                    <div class="form-group m-2 input-box">
                                        <label class="signup-label">{{ __('Email Address') }}</label>
                                        <input type="email" name="email" class="form-control input-border signup-label" placeholder="Enter Email" value="">
                                    </div>
                                    @error('email')
                                        <label class="label m-2">
                                            <strong class="text-danger">
                                                {{ $message }}</strong>
                                        </label>
                                    @enderror
                                    <div class="row mt-4">
                                    <div class="col-md-6 offset-md-4">
                                        <button type="submit" class="btn work-spacebtn">
                                            {{ __('Send Password Reset Link') }}
                                        </button>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (window.innerWidth <= 768) { // Adjust the width threshold as needed
        var links = document.querySelectorAll('a');
        links.forEach(function(link) {
            link.addEventListener('click', function(event) {
                event.preventDefault();
                alert('This link is disabled on mobile devices.');
            });
            link.style.pointerEvents = 'none';
            link.style.color = '#999';
        });
    }
});
</script>
@endsection