@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">
    @if(isset($iscompletedApplication))
    <div class="topbar">
        <h3>{{ __('form.Hi') }}, <strong>{{ auth()->user()->name }}</strong></h3>
        
        <h6>{{ __('form.successHeadermsg.1') }} {{@$settings->current_year}} {{ __('form.successHeadermsg.2') }}</h6>
        <p style="font-size: 30px !important;">{{ __('form.Application') }}: {{@$iscompletedApplication->id}}</p>
            <div class="progress_bar">
        <p>{{ __('form.SuccessMessage') }} {{ \Carbon\Carbon::parse($settings->last_date_of_application_submission)->format('F d, Y') }}
        </p>
    </div>
</div>
@else
    <div class="topbar">
        <h3>{{ __('form.Hi') }},</h3>
        <h4>{{ auth()->user()->name }}</h4>
    </div>
    @endif
    <div class="lang_block">
        <div class="inner">
            <div class="icon_box">
                <img src="{{asset('/frontend')}}/user-assets/img/translation_icon.svg" alt="">
            </div>
            <label for="">Language:</label>
            <select name="" class="right-container" id="lang-change">
                @foreach (config('app.allowed_languages') as $ln_key => $ln_value)
                    <option class="text-black" value="{{ $ln_key }}" {{ App::getLocale() == $ln_key ? 'selected' : '' }}>{{ $ln_value }}</option>
                @endforeach
            </select>
        </div>
    </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>{{ __('form.BasicInformation') }}</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 disabled type="text" placeholder="Email" readonly value="{{ $userDetails->email }}">
                        </div>
                        <div class="btn_row">
                            <button type="submit" class="site_btn site_btn_success"><span>{{ __('form.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>{{ __('form.ChangePassword') }}</h2>
                    <form id="passwordChangeForm" method="post" action="{{ route('user.profile.passwordChange') }}">
                        @csrf
                        <div class="input_field_txt field_row change_password_profile">
                            <div class="form_field">
                                <input type="password" id="old_password" name="old_password" placeholder="Old Password" required>
                                <span id="old_password_error" style="color: red; display: none;">{{ __('form.oldPasswordmsg') }}</span>
                            </div>
                            <div class="form_field">
                                <input type="password" id="new_password" name="new_password" placeholder="New Password" required>
                                <span id="new_password_error" style="color: red; display: none;">{{ __('form.newPasswordmsg') }}</span>
                            </div>
                            <div class="form_field">
                                <input type="password" id="new_password_confirmation" name="new_password_confirmation" placeholder="Confirm Password" required>
                                <span id="confirm_password_error" style="color: red; display: none;">{{ __('form.passwordNotMatch') }}</span>
                            </div>
                        </div>
                        <div class="btn_row">
                            <button type="button" class="site_btn site_btn_success" onclick="validatePasswordChangeForm()"><span>{{ __('form.Update') }}</span></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function validatePasswordChangeForm() {
        var oldPassword = document.getElementById('old_password').value;
        var newPassword = document.getElementById('new_password').value;
        var confirmPassword = document.getElementById('new_password_confirmation').value;

        var oldPasswordError = document.getElementById('old_password_error');
        var newPasswordError = document.getElementById('new_password_error');
        var confirmPasswordError = document.getElementById('confirm_password_error');

        // Reset error messages
        oldPasswordError.style.display = 'none';
        newPasswordError.style.display = 'none';
        confirmPasswordError.style.display = 'none';

        var isValid = true;

        // Validate old password length
        if (oldPassword.length < 8) {
            oldPasswordError.style.display = 'block';
            isValid = false;
        }

        // Validate new password length
        if (newPassword.length < 8) {
            newPasswordError.style.display = 'block';
            isValid = false;
        }

        // Validate password match
        if (newPassword !== confirmPassword) {
            confirmPasswordError.style.display = 'block';
            isValid = false;
        }

        // Submit the form if valid
        if (isValid) {
            document.getElementById('passwordChangeForm').submit();
        }
    }

    // Add event listeners to validate on input
    document.addEventListener('DOMContentLoaded', function() {
        var oldPasswordInput = document.getElementById('old_password');
        var newPasswordInput = document.getElementById('new_password');
        var confirmPasswordInput = document.getElementById('new_password_confirmation');

        // Validate old password length
        oldPasswordInput.addEventListener('input', function() {
            var errorSpan = document.getElementById('old_password_error');
            if (oldPasswordInput.value.length < 8) {
                errorSpan.style.display = 'block';
            } else {
                errorSpan.style.display = 'none';
            }
        });

        // Validate new password length
        newPasswordInput.addEventListener('input', function() {
            var errorSpan = document.getElementById('new_password_error');
            if (newPasswordInput.value.length < 8) {
                errorSpan.style.display = 'block';
            } else {
                errorSpan.style.display = 'none';
            }
        });

        // Validate password match
        confirmPasswordInput.addEventListener('input', function() {
            var errorSpan = document.getElementById('confirm_password_error');
            if (newPasswordInput.value !== confirmPasswordInput.value) {
                errorSpan.style.display = 'block';
            } else {
                errorSpan.style.display = 'none';
            }
        });
    });
</script>

@endsection

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