@extends('layouts.app')

@section('title', 'Profile Settings - VPN Admin')

@push('styles')
<style>
    .profile-card {
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .section-divider {
        border-top: 2px solid #e9ecef;
        margin: 30px 0;
    }
    .form-group label {
        font-weight: 600;
        color: #495057;
    }
    .alert {
        border-radius: 6px;
    }
</style>
@endpush

@section('content')
<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="m-t-30"><img src="{{ asset('assets/images/logo-icon.svg') }}" width="48" height="48" alt="VPN Admin"></div>
        <p>Please wait...</p>
    </div>
</div>

<!-- main page content body part -->
<div id="main-content">
    <div class="container-fluid">
        <div class="block-header">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <h2>Profile Settings</h2>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i></a></li>
                        <li class="breadcrumb-item active">Profile Settings</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-lg-12 col-md-12">
                <!-- Basic Account Settings -->
                <div class="card profile-card">
                    <div class="header">
                        <h2><i class="fa fa-user"></i> Basic Account Settings</h2>
                    </div>
                    <div class="body">
                        <div id="profileAlert" style="display: none;"></div>
                        <form id="profileForm">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="name">Full Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="name" name="name" 
                                               value="{{ old('name', $user->name) }}" required>
                                        <small class="form-text text-muted">Your full name</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="username">Username <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="username" name="username" 
                                               value="{{ old('username', $user->username) }}" required>
                                        <small class="form-text text-muted">Your unique username</small>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email">Email Address <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control" id="email" name="email" 
                                               value="{{ old('email', $user->email) }}" required>
                                        <small class="form-text text-muted">Your email address</small>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary" id="updateProfileBtn">
                                    <i class="fa fa-save"></i> Update Profile
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="section-divider"></div>

                <!-- Password Update -->
                <div class="card profile-card">
                    <div class="header">
                        <h2><i class="fa fa-lock"></i> Change Password</h2>
                    </div>
                    <div class="body">
                        <div id="passwordAlert" style="display: none;"></div>
                        <form id="passwordForm">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="current_password">Current Password <span class="text-danger">*</span></label>
                                        <input type="password" class="form-control" id="current_password" 
                                               name="current_password" required>
                                        <small class="form-text text-muted">Enter your current password</small>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="new_password">New Password <span class="text-danger">*</span></label>
                                        <input type="password" class="form-control" id="new_password" 
                                               name="new_password" required minlength="8">
                                        <small class="form-text text-muted">Minimum 8 characters</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="new_password_confirmation">Confirm New Password <span class="text-danger">*</span></label>
                                        <input type="password" class="form-control" id="new_password_confirmation" 
                                               name="new_password_confirmation" required minlength="8">
                                        <small class="form-text text-muted">Re-enter your new password</small>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary" id="updatePasswordBtn">
                                    <i class="fa fa-key"></i> Update Password
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Update Profile Form
    $('#profileForm').on('submit', function(e) {
        e.preventDefault();
        
        var btn = $('#updateProfileBtn');
        var originalText = btn.html();
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Updating...');
        
        $.ajax({
            url: "{{ route('profile.update') }}",
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    showAlert('profileAlert', 'success', response.message);
                    // Update form values if needed
                    $('#name').val(response.data.name);
                    $('#username').val(response.data.username);
                    $('#email').val(response.data.email);
                } else {
                    showAlert('profileAlert', 'danger', response.message || 'Error updating profile');
                }
            },
            error: function(xhr) {
                var message = 'Error updating profile. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                    var errors = Object.values(xhr.responseJSON.errors).flat();
                    message = errors.join('<br>');
                }
                showAlert('profileAlert', 'danger', message);
            },
            complete: function() {
                btn.prop('disabled', false).html(originalText);
            }
        });
    });

    // Update Password Form
    $('#passwordForm').on('submit', function(e) {
        e.preventDefault();
        
        var newPassword = $('#new_password').val();
        var confirmPassword = $('#new_password_confirmation').val();
        
        // Client-side validation
        if (newPassword !== confirmPassword) {
            showAlert('passwordAlert', 'danger', 'New password and confirmation password do not match!');
            return;
        }
        
        if (newPassword.length < 8) {
            showAlert('passwordAlert', 'danger', 'Password must be at least 8 characters long!');
            return;
        }
        
        var btn = $('#updatePasswordBtn');
        var originalText = btn.html();
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Updating...');
        
        $.ajax({
            url: "{{ route('profile.update-password') }}",
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    showAlert('passwordAlert', 'success', response.message);
                    // Clear password fields
                    $('#passwordForm')[0].reset();
                } else {
                    showAlert('passwordAlert', 'danger', response.message || 'Error updating password');
                }
            },
            error: function(xhr) {
                var message = 'Error updating password. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                    var errors = Object.values(xhr.responseJSON.errors).flat();
                    message = errors.join('<br>');
                }
                showAlert('passwordAlert', 'danger', message);
            },
            complete: function() {
                btn.prop('disabled', false).html(originalText);
            }
        });
    });

    // Helper function to show alerts
    function showAlert(alertId, type, message) {
        var alertDiv = $('#' + alertId);
        alertDiv.removeClass('alert-success alert-danger alert-warning alert-info')
               .addClass('alert alert-' + type)
               .html('<button type="button" class="close" data-dismiss="alert">&times;</button>' + message)
               .fadeIn();
        
        // Auto-hide after 5 seconds
        setTimeout(function() {
            alertDiv.fadeOut();
        }, 5000);
    }
});
</script>
@endpush