@extends('layouts.master')
@section('body_id', 'forgot_password_page')
@section('content')

    <section class="breadcrumb_main_area margin-bottom-80 custom-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="breadcrumb_main text-center">
                    <h2 class="breadcrumb-title">Account Recovery</h2>
                    <p class="breadcrumb-subtitle">Update your account security credentials instantly</p>
                </div>
            </div>
        </div>
    </section>

    <section class="hotel_booking_area margin-bottom-80">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-8 col-lg-offset-3 col-md-offset-3 col-sm-offset-2 col-xs-12">
                    <div class="hotel_booking merchant-register-card">
                        
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 text-center">
                                <div class="room_book card-header-section">
                                    <h3 class="form-main-heading">Reset Password</h3>
                                    <p class="form-sub-heading">Enter your registered identity to update your password profile directly.</p>
                                </div>
                            </div>
                        </div>

                        <form action="{{ route('password.update') }}" method="POST" id="vendorForgotForm">
                            @csrf
                            
                            <div class="row">
                                <div class="col-md-12 col-sm-12 col-xs-12 form-group custom-form-group">
                                    <label for="identity" class="custom-form-label">Registered Email or Mobile Number</label>
                                    <input type="text" class="form-control custom-form-input @error('identity') is-invalid @enderror" id="identity" name="identity" value="{{ old('identity') }}" required placeholder="e.g. user@example.com or 9876543210">
                                    @error('identity')
                                        <span class="field-error-message">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 col-sm-12 col-xs-12 form-group custom-form-group-spaced">
                                    <label for="password" class="custom-form-label">New Password</label>
                                    <input type="password" class="form-control custom-form-input @error('password') is-invalid @enderror" id="password" name="password" required placeholder="Minimum 8 characters">
                                    @error('password')
                                        <span class="field-error-message">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 col-sm-12 col-xs-12 form-group custom-form-group-spaced">
                                    <label for="password_confirmation" class="custom-form-label">Confirm New Password</label>
                                    <input type="password" class="form-control custom-form-input" id="password_confirmation" name="password_confirmation" required placeholder="Re-enter new password">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <div class="booking_next_btn custom-action-footer">
                                        <p class="login-redirect-text">Remembered account? <br><a href="{{ route('login') }}" class="login-redirect-link">Back to Login</a></p>
                                        <button type="button" id="submitForgotBtn" class="btn btn-warning custom-submit-btn">Update Password</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        .custom-breadcrumb {
            background-size: cover; 
            padding: 90px 0;
            border-bottom: 3px solid #C6A87C;
        }
        .breadcrumb-title { color: #ffffff; font-size: 40px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin: 0; }
        .breadcrumb-subtitle { color: #d1c2ad; margin-top: 12px; font-size: 16px; letter-spacing: 1px; font-weight: 500; }
        
        .merchant-register-card {
            background: #ffffff; border-radius: 18px; box-shadow: 0 20px 45px rgba(198, 168, 124, 0.06), 0 5px 15px rgba(0, 0, 0, 0.02); padding: 55px 60px; border: 1px solid #eaeaea;
        }
        .card-header-section { padding-bottom: 25px; border-bottom: 1px solid #f1f1f1; margin-bottom: 40px; }
        .form-main-heading { font-weight: 700; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.8px; font-size: 26px; margin-bottom: 10px; }
        .form-sub-heading { color: #666666; font-size: 14px; margin: 0; }
        
        .custom-form-group { margin-bottom: 24px; }
        .custom-form-group-spaced { margin-bottom: 24px; margin-top: 5px; }
        .custom-form-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px; color: #333333; font-weight: 700; margin-bottom: 10px; display: block; }
        
        .custom-form-input {
            height: 52px; border-radius: 10px; border: 1px solid #e0dcd8; padding: 10px 18px; font-size: 14px; box-shadow: none !important; background-color: #faf9f7; transition: all 0.25s ease-in-out; width: 100%;
        }
        .custom-form-input:focus { border-color: #C6A87C !important; box-shadow: 0 0 0 4px rgba(198, 168, 124, 0.12) !important; background-color: #ffffff; outline: none; }
        
        .custom-action-footer { border-top: 1px solid #f1f1f1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; padding-top: 30px; }
        .login-redirect-text { margin: 0; color: #666666; font-size: 14px; line-height: 1.4; }
        .login-redirect-link { color: #C6A87C; font-weight: 700; text-decoration: none; border-bottom: 1px solid transparent; transition: all 0.2s ease-in-out; }
        .login-redirect-link:hover { color: #8c7149; border-bottom-color: #8c7149; }
        
        .custom-submit-btn {
            background-color: #C6A87C !important; border: 1px solid #C6A87C !important; color: #ffffff !important; padding: 15px 35px; font-size: 14px; font-weight: 700; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.8px; transition: all 0.25s ease-in-out; box-shadow: 0 6px 20px rgba(198, 168, 124, 0.2); 
        }
        .custom-submit-btn:hover { background-color: #b29468 !important; border-color: #b29468 !important; box-shadow: 0 10px 25px rgba(198, 168, 124, 0.3); transform: translateY(-1.5px); }

        .is-invalid { border-color: #e53e3e !important; background-color: #fffafb !important; }
        .field-error-message { color: #e53e3e; font-size: 12px; font-weight: 600; margin-top: 8px; display: block; letter-spacing: 0.2px; }

        @media (max-width: 767px) {
            .custom-breadcrumb { padding: 60px 0; }
            .breadcrumb-title { font-size: 30px; }
            .merchant-register-card { padding: 30px 20px; border-radius: 12px; }
            .custom-action-footer { flex-direction: column-reverse; text-align: center; gap: 20px; width: 100%; }
            .custom-submit-btn { width: 100%; text-align: center; padding: 14px 20px; }
            .login-redirect-text { width: 100%; text-align: center; }
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function() {
        
        // Input fields blur/keyup state mapping
        $('#identity, #password, #password_confirmation').on('blur keyup', function() {
            validateField($(this));
        });

        function validateField(input) {
            let id = input.attr('id');
            let val = input.val().trim();
            let errorSpan = input.closest('.form-group').find('.field-error-message');
            let isValid = true;
            let message = "";

            if (errorSpan.length === 0) {
                input.after('<span class="field-error-message"></span>');
                errorSpan = input.closest('.form-group').find('.field-error-message');
            }

            if (id === 'identity' && val === '') {
                message = "Please enter your registered Email Address or Mobile Number.";
                isValid = false;
            }

            if (id === 'password') {
                if (val === '') {
                    message = "Please enter a new secure password.";
                    isValid = false;
                } else if (val.length < 8) {
                    message = "The password must be at least 8 characters long.";
                    isValid = false;
                }
            }

            if (id === 'password_confirmation') {
                let passwordVal = $('#password').val();
                if (val === '') {
                    message = "Please confirm your new password.";
                    isValid = false;
                } else if (val !== passwordVal) {
                    message = "The password confirmation field does not match.";
                    isValid = false;
                }
            }

            if (!isValid) {
                input.addClass('is-invalid');
                errorSpan.text(message).show();
            } else {
                input.removeClass('is-invalid');
                errorSpan.text('').hide();
            }

            return isValid;
        }

        // Trigger safe validation checking on main button intercept click
        $('#submitForgotBtn').on('click', function(e) {
            e.preventDefault();
            let isFormValid = true;

            $('#identity, #password, #password_confirmation').each(function() {
                if (!validateField($(this))) {
                    isFormValid = false;
                }
            });

            if (isFormValid) {
                $('#vendorForgotForm').submit();
            }
        });
    });
    </script>

@endsection