@extends('front.layouts.app')

@section('content')
<section class="login-section">
    <div class="login-header">
        <div class="text-center mb-4">
            <img src="{{ asset('front/assets/images/logo.png') }}" alt="{{ \Config::get('settings.company_name') }} Logo" style="max-width: 200px;" />
        </div>
        <h1>Reset Password</h1>
        <p>Enter your new password below.</p>
    </div>
    <div class="login-card">
        @include('admin.components.messages')
        
        <form method="POST" action="{{ route('password.update') }}">
            @csrf
            <input type="hidden" name="token" value="{{ $token }}">
            
            <div class="form-group">
                <label class="form-label" for="email">Email Address <span class="required-asterisk">*</span></label>
                <div class="input-wrapper">
                    <input id="email" type="email" placeholder="e.g. johnsmith@email.com" class="form-input {{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ $email ?? old('email') }}" required autofocus>
                    
                    <span class="input-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18" fill="none">
                        <path d="M20.75 11.75V2.75C20.75 2.21957 20.5393 1.71086 20.1642 1.33579C19.7891 0.960714 19.2804 0.75 18.75 0.75H2.75C2.21957 0.75 1.71086 0.960714 1.33579 1.33579C0.960714 1.71086 0.75 2.21957 0.75 2.75V14.75C0.75 15.85 1.65 16.75 2.75 16.75H10.75M20.75 3.75L11.78 9.45C11.4713 9.64343 11.1143 9.74601 10.75 9.74601C10.3857 9.74601 10.0287 9.64343 9.72 9.45L0.75 3.75M14.75 15.75H20.75" stroke="#AEBAC7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                </div>
                @if ($errors->has('email'))
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $errors->first('email') }}</strong>
                    </span>
                @endif
            </div>

            <div class="form-group">
                <label class="form-label" for="password">Password <span class="required-asterisk">*</span></label>
                <div class="input-wrapper">
                    <input id="password" type="password" placeholder="Enter new password" class="form-input password-field {{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
                    
                    <span class="input-icon password-toggle" style="cursor: pointer; pointer-events: auto;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                        <path d="M9.48351 3.826C11.8129 3.5484 14.1691 4.04082 16.1924 5.22805C18.2156 6.41528 19.7947 8.23208 20.6885 10.401C20.7718 10.6255 20.7718 10.8725 20.6885 11.097C20.321 11.988 19.8353 12.8255 19.2445 13.587M12.8345 12.908C12.2687 13.4545 11.5109 13.7569 10.7243 13.75C9.93771 13.7432 9.18527 13.4277 8.62905 12.8715C8.07282 12.3152 7.75732 11.5628 7.75048 10.7762C7.74365 9.98961 8.04603 9.23181 8.59251 8.666M16.2295 16.249C14.903 17.0348 13.423 17.526 11.8899 17.6894C10.3568 17.8528 8.80646 17.6845 7.34414 17.1959C5.88182 16.7073 4.5417 15.9099 3.41472 14.8577C2.28773 13.8056 1.40026 12.5234 0.812505 11.098C0.729165 10.8735 0.729165 10.6265 0.812505 10.402C1.69914 8.25186 3.25918 6.44725 5.25851 5.259M0.750505 0.75L20.7505 20.75" stroke="#AEBAC7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                </div>
                @if ($errors->has('password'))
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $errors->first('password') }}</strong>
                    </span>
                @endif
            </div>

            <div class="form-group">
                <label class="form-label" for="password-confirm">Confirm Password <span class="required-asterisk">*</span></label>
                <div class="input-wrapper">
                    <input id="password-confirm" type="password" placeholder="Confirm new password" class="form-input" name="password_confirmation" required>
                    
                    <span class="input-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                        <path d="M9.48351 3.826C11.8129 3.5484 14.1691 4.04082 16.1924 5.22805C18.2156 6.41528 19.7947 8.23208 20.6885 10.401C20.7718 10.6255 20.7718 10.8725 20.6885 11.097C20.321 11.988 19.8353 12.8255 19.2445 13.587M12.8345 12.908C12.2687 13.4545 11.5109 13.7569 10.7243 13.75C9.93771 13.7432 9.18527 13.4277 8.62905 12.8715C8.07282 12.3152 7.75732 11.5628 7.75048 10.7762C7.74365 9.98961 8.04603 9.23181 8.59251 8.666M16.2295 16.249C14.903 17.0348 13.423 17.526 11.8899 17.6894C10.3568 17.8528 8.80646 17.6845 7.34414 17.1959C5.88182 16.7073 4.5417 15.9099 3.41472 14.8577C2.28773 13.8056 1.40026 12.5234 0.812505 11.098C0.729165 10.8735 0.729165 10.6265 0.812505 10.402C1.69914 8.25186 3.25918 6.44725 5.25851 5.259M0.750505 0.75L20.7505 20.75" stroke="#AEBAC7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                </div>
            </div>

            <button type="submit" class="blue-btn-lg">Reset Password</button>
        </form>

        <div class="login-signup-links">
            <p class="signup-link">Remember your password? <a href="{{ route('login') }}">Sign In</a></p>
        </div>
    </div>
</section>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const passwordField = document.querySelector('.password-field');
    const passwordToggleIcon = document.querySelector('.password-toggle');
    const passwordToggleCheckbox = document.querySelector('.password-toggle-checkbox');
    
    // Function to toggle password visibility
    function togglePasswordVisibility() {
        if (passwordField) {
            const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordField.setAttribute('type', type);
            
            // Sync checkbox state
            if (passwordToggleCheckbox) {
                passwordToggleCheckbox.checked = (type === 'text');
            }
        }
    }
    
    // Handle icon click
    if (passwordToggleIcon) {
        passwordToggleIcon.addEventListener('click', function() {
            togglePasswordVisibility();
        });
    }
    
    // Handle checkbox change
    if (passwordToggleCheckbox) {
        passwordToggleCheckbox.addEventListener('change', function() {
            togglePasswordVisibility();
        });
    }
});
</script>
@endpush
@endsection