@extends('auth.layouts.app')

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

@section('content-section')
    <div class="container container-tight py-4">
        <div class="text-center mb-4">
            <a href="." class="navbar-brand navbar-brand-autodark">
                <img src="{{ asset('static/logo.png') }}" width="110" height="32" alt="Tabler"
                    class="navbar-brand-image h-7">
            </a>
        </div>
        <form id="forgot-password-form" class="card card-md" action="{{ route('password.email') }}" method="POST"
            autocomplete="off">
            {{-- {{ csrf_field() }} --}}
            @csrf
            <div class="card-body">
                <h2 class="card-title text-center mb-4">Forgot password</h2>
                <p class="text-secondary mb-4">Forgot your password? No problem. Just let us know your email address and
                    we will email you a password reset link that will allow you to choose a new one.</p>
                @if (session('status'))
                    <div class="font-medium text-sm text-green mb-4">
                        {{ session('status') }}
                    </div>
                @endif
                <div class="mb-3">
                    <label class="form-label">Email address</label>
                    <input type="email" id="email" name="email"
                        class="form-control @error('email') is-invalid @enderror" placeholder="Enter email"
                        value="{{ old('email') }}" autofocus>
                    @error('email')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-footer">
                    <button type="submit" class="btn btn-primary w-100" id="submit-btn">
                        <span id="btn-text">
                            <!-- Download SVG icon from http://tabler-icons.io/i/mail -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" />
                                <path d="M3 7l9 6l9 -6" />
                            </svg>
                            Send me new password
                        </span>
                        <span id="btn-loader" class="d-none">
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Sending...
                        </span>
                    </button>
                </div>
            </div>
        </form>
        <div class="text-center text-secondary mt-3">
            Forget it, <a href="{{ route('login') }}">send me back</a> to the sign in screen.
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // console.log('Login page-specific script is running!');
            // Add your custom JavaScript code here
        });
        document.getElementById('forgot-password-form').addEventListener('submit', function() {
            let submitBtn = document.getElementById('submit-btn');
            let btnText = document.getElementById('btn-text');
            let btnLoader = document.getElementById('btn-loader');

            // Disable button and show loader
            submitBtn.disabled = true;
            btnText.classList.add('d-none');
            btnLoader.classList.remove('d-none');
        });
    </script>
@endsection