@extends('frontend.user-dashboard.layout.app')
@section('header')
    @include('frontend.user-dashboard.include.header')
    @include('frontend.user-dashboard.include.sidebar')
@endsection
@section('content')

<div class="dashboard_wrapper">
    <div class="topbar">
        <h3>Hi</h3>
        <h4>{{ auth()->user()->name }}</h4>
    </div>
    <div class="content_area">
        <div class="content_box">
            <div class="question_box">
                <div class="no_box">
                    <span><img src="{{ asset('frontend/') }}/user-assets/img/user.png"></span>
                </div>
                <div class="main_question">
                    <h2>Basic Information</h2>
                    <form method="post" action="{{ route('user.profile.update') }}"> 
                        @csrf
                        <div class="input_field_txt field_row">
                            <input type="text" name="name" placeholder="Name" value="{{ old('name', $userDetails->name) }}">
                            <input type="text" placeholder="Email" readonly value="{{ $userDetails->email }}">
                        </div>
                        <div class="btn_row">
                            <button type="submit" class="site_btn site_btn_success"><span>Update</span></button>
                        </div>
                    </form>
                    
                </div>
            </div><hr>
            <div class="question_box">
                <div class="no_box">
                    <span><img src="{{ asset('frontend/') }}/user-assets/img/password.png"></span>
                </div>
                <div class="main_question">
                    <h2>Change Password</h2>
                    <form id="passwordChangeForm" method="post" action="{{ route('user.profile.passwordChange') }}">
                        @csrf
                        <div class="input_field_txt field_row">
                            <input type="password" name="old_password" placeholder="Old Password" required>
                            <input type="password" id="new_password" name="new_password" placeholder="New Password" required>
                            <input type="password" id="new_password_confirmation" name="new_password_confirmation" placeholder="Confirm Password" required>
                            <div id="passwordError" style="color: red; display: none;">Passwords do not match.</div>
                        </div>
                        <div class="btn_row">
                            <button type="submit" class="site_btn site_btn_success"><span>Update</span></button>
                        </div>
                    </form>
                    
                </div>
            </div>
            
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('passwordChangeForm');
        const newPassword = document.getElementById('new_password');
        const newPasswordConfirmation = document.getElementById('new_password_confirmation');
        const passwordError = document.getElementById('passwordError');

        function checkPasswords() {
            if (newPassword.value !== newPasswordConfirmation.value) {
                passwordError.style.display = 'block';
                return false;
            } else {
                passwordError.style.display = 'none';
                return true;
            }
        }

        newPasswordConfirmation.addEventListener('input', checkPasswords);

        form.addEventListener('submit', function(event) {
            if (!checkPasswords()) {
                event.preventDefault();
            }
        });
    });
</script>

@endsection
@section('footer')
    @include('frontend.user-dashboard.include.footer')
@endsection