@extends('layouts.frontend')
@section('title_page', 'Profile Management - Rusizi Veterinary')

@section('content')
<!--Start breadcrumb area-->
<section class="breadcrumb-area style2" style="background-image: url(images/resources/breadcrumb-bg-2.jpg);">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="inner-content-box clearfix">
                    <div class="title-s2 text-center">
                        <span>My Account</span>
                        <h1>Profile Management</h1>
                    </div>
                    <div class="breadcrumb-menu float-left">
                        <ul class="clearfix">
                            <li><a href="/">Home</a></li>
                            <li><a href="/dashboard">Dashboard</a></li>
                            <li class="active">Profile</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End breadcrumb area-->

<!--Start Single Service Area-->
<section class="single-service-area">
    <div class="container">
        <div class="row">
            @include('frontend.partials.sidebar')

            <div class="col-xl-8 col-lg-7 col-md-12 col-sm-12">
                <!-- Success Messages -->
                @if(session('status') == 'profile-updated')
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fas fa-check-circle"></i>
                        Profile updated successfully!
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                @if(session('status') == 'password-updated')
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fas fa-check-circle"></i>
                        Password updated successfully!
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                <!-- Profile Header -->
                <div class="single-service-top">
                    <div class="text">
                        <h2>Profile Management</h2>
                        <div class="inner">
                            <p>Manage your account information and security settings</p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Profile Information Section -->
                    <div class="col-xl-6 col-lg-6">
                        <div class="profile-section">
                            <div class="section-header">
                                <h3><i class="fas fa-user-circle"></i> Personal Information</h3>
                                <p>Update your basic profile details</p>
                            </div>

                            <form method="POST" action="{{ route('profile.update') }}" class="profile-form">
                                @csrf
                                @method('PATCH')
                                
                                <div class="form-group">
                                    <label for="fullName" class="form-label">
                                        <i class="fas fa-user"></i>
                                        Full Name
                                    </label>
                                    <input 
                                        type="text" 
                                        id="fullName" 
                                        name="name"
                                        class="form-input @error('name') is-invalid @enderror"
                                        value="{{ old('name', Auth::user()->name) }}"
                                        placeholder="Enter your full name"
                                        required
                                    >
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="email" class="form-label">
                                        <i class="fas fa-envelope"></i>
                                        Email Address
                                    </label>
                                    <input 
                                        type="email" 
                                        id="email" 
                                        name="email"
                                        class="form-input @error('email') is-invalid @enderror"
                                        value="{{ old('email', Auth::user()->email) }}"
                                        placeholder="Enter your email address"
                                        required
                                    >
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="phone" class="form-label">
                                        <i class="fas fa-phone"></i>
                                        Phone Number
                                    </label>
                                    <input 
                                        type="tel" 
                                        id="phone" 
                                        name="phone"
                                        class="form-input @error('phone') is-invalid @enderror"
                                        value="{{ old('phone', Auth::user()->phone ?? '') }}"
                                        placeholder="Enter your phone number"
                                    >
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i>
                                        Update Profile
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Change Password Section -->
                    <div class="col-xl-6 col-lg-6">
                        <div class="profile-section">
                            <div class="section-header">
                                <h3><i class="fas fa-lock"></i> Change Password</h3>
                                <p>Update your password for security</p>
                            </div>

                            <form method="POST" action="{{ route('profile.password.update') }}" class="profile-form">
                                @csrf
                                @method('PATCH')
                                
                                <div class="form-group">
                                    <label for="current_password" class="form-label">
                                        <i class="fas fa-key"></i>
                                        Current Password
                                    </label>
                                    <input 
                                        type="password" 
                                        id="current_password" 
                                        name="current_password"
                                        class="form-input @error('current_password') is-invalid @enderror"
                                        placeholder="Enter current password"
                                        required
                                    >
                                    <div class="password-toggle">
                                        <i class="fas fa-eye" id="toggleCurrentPassword"></i>
                                    </div>
                                    @error('current_password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="password" class="form-label">
                                        <i class="fas fa-lock"></i>
                                        New Password
                                    </label>
                                    <input 
                                        type="password" 
                                        id="password" 
                                        name="password"
                                        class="form-input @error('password') is-invalid @enderror"
                                        placeholder="Enter new password"
                                        required
                                    >
                                    <div class="password-toggle">
                                        <i class="fas fa-eye" id="toggleNewPassword"></i>
                                    </div>
                                    @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="password-strength">
                                        <div class="strength-bar">
                                            <div class="strength-fill" id="passwordStrength"></div>
                                        </div>
                                        <small class="strength-text" id="passwordText">Password strength</small>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="password_confirmation" class="form-label">
                                        <i class="fas fa-lock"></i>
                                        Confirm New Password
                                    </label>
                                    <input 
                                        type="password" 
                                        id="password_confirmation" 
                                        name="password_confirmation"
                                        class="form-input"
                                        placeholder="Confirm new password"
                                        required
                                    >
                                    <div class="password-toggle">
                                        <i class="fas fa-eye" id="toggleConfirmPassword"></i>
                                    </div>
                                    <div class="password-match" id="passwordMatch">
                                        <i class="fas fa-check"></i>
                                        <span>Passwords match</span>
                                    </div>
                                </div>

                                <div class="password-requirements">
                                    <h5>Password Requirements:</h5>
                                    <ul>
                                        <li id="reqLength"><i class="fas fa-circle"></i> At least 8 characters</li>
                                        <li id="reqUppercase"><i class="fas fa-circle"></i> One uppercase letter</li>
                                        <li id="reqLowercase"><i class="fas fa-circle"></i> One lowercase letter</li>
                                        <li id="reqNumber"><i class="fas fa-circle"></i> One number</li>
                                        <li id="reqSpecial"><i class="fas fa-circle"></i> One special character</li>
                                    </ul>
                                </div>

                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-key"></i>
                                        Change Password
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

               

               
            </div>
        </div>
    </div>
</section>
<!--End Single Service Area-->
@endsection

<style>
/* Profile Sections */
.profile-section {
    background: #fff;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.profile-section .section-header h3 {
    color: #2c3e50;
    margin: 0 0 8px 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-section .section-header h3 i {
    color: #3498db;
}

.profile-section .section-header p {
    color: #7f8c8d;
    margin: 0;
}

/* Profile Form Styles */
.profile-form .form-group {
    position: relative;
    margin-bottom: 20px;
}

.profile-form .form-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ecf0f1;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #fafbfc;
}

.profile-form .form-input:focus {
    outline: none;
    border-color: #3498db;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.profile-form .form-input.is-invalid {
    border-color: #e74c3c;
}

.invalid-feedback {
    display: block;
    color: #e74c3c;
    font-size: 12px;
    margin-top: 5px;
}

/* Password Toggle */
.password-toggle {
    position: absolute;
    right: 15px;
    top: 42px;
    cursor: pointer;
    color: #7f8c8d;
    transition: color 0.3s ease;
}

.password-toggle:hover {
    color: #3498db;
}

/* Password Strength */
.password-strength {
    margin-top: 8px;
}

.strength-bar {
    width: 100%;
    height: 4px;
    background: #ecf0f1;
    border-radius: 2px;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.strength-text {
    color: #7f8c8d;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Password Match Indicator */
.password-match {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #27ae60;
    font-size: 12px;
    font-weight: 500;
}

.password-match.show {
    display: flex;
}

.password-match i {
    font-size: 14px;
}

/* Password Requirements */
.password-requirements {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
    margin: 20px 0;
    border-left: 4px solid #3498db;
}

.password-requirements h5 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 14px;
}

.password-requirements ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.password-requirements li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 12px;
    color: #7f8c8d;
}

.password-requirements li.valid {
    color: #27ae60;
}

.password-requirements li.valid i {
    color: #27ae60;
}

.password-requirements li i {
    font-size: 6px;
    color: #bdc3c7;
}

/* Profile Statistics */
.profile-stat {
    background: #3498db !important;
}

/* Form Actions */
.profile-form .form-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #ecf0f1;
}

.btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn:hover {
    background: #2980b9;
    transform: translateY(-1px);
}

.btn:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
}

/* Success Messages */
.alert-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success .close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 768px) {
    .profile-section {
        padding: 20px 15px;
    }
    
    .profile-form .form-actions {
        flex-direction: column;
    }
    
    .btn {
        justify-content: center;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Password toggle functionality
    const toggleCurrentPassword = document.getElementById('toggleCurrentPassword');
    const toggleNewPassword = document.getElementById('toggleNewPassword');
    const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
    const currentPassword = document.getElementById('current_password');
    const newPassword = document.getElementById('password');
    const confirmPassword = document.getElementById('password_confirmation');

    // Toggle password visibility
    function setupPasswordToggle(toggleIcon, passwordField) {
        toggleIcon.addEventListener('click', function() {
            const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordField.setAttribute('type', type);
            toggleIcon.classList.toggle('fa-eye');
            toggleIcon.classList.toggle('fa-eye-slash');
        });
    }

    if (toggleCurrentPassword && currentPassword) {
        setupPasswordToggle(toggleCurrentPassword, currentPassword);
    }
    if (toggleNewPassword && newPassword) {
        setupPasswordToggle(toggleNewPassword, newPassword);
    }
    if (toggleConfirmPassword && confirmPassword) {
        setupPasswordToggle(toggleConfirmPassword, confirmPassword);
    }

    // Password strength checker
    if (newPassword) {
        newPassword.addEventListener('input', function() {
            checkPasswordStrength(this.value);
            checkPasswordMatch();
        });
    }

    if (confirmPassword) {
        confirmPassword.addEventListener('input', checkPasswordMatch);
    }

    function checkPasswordStrength(password) {
        const strengthBar = document.getElementById('passwordStrength');
        const strengthText = document.getElementById('passwordText');
        
        if (!strengthBar || !strengthText) return;

        let strength = 0;
        const requirements = {
            length: password.length >= 8,
            uppercase: /[A-Z]/.test(password),
            lowercase: /[a-z]/.test(password),
            number: /[0-9]/.test(password),
            special: /[^A-Za-z0-9]/.test(password)
        };

        // Update requirement indicators
        Object.keys(requirements).forEach(req => {
            const element = document.getElementById(`req${req.charAt(0).toUpperCase() + req.slice(1)}`);
            if (element) {
                if (requirements[req]) {
                    element.classList.add('valid');
                    strength++;
                } else {
                    element.classList.remove('valid');
                }
            }
        });

        // Update strength bar and text
        const strengthPercent = (strength / 5) * 100;
        strengthBar.style.width = strengthPercent + '%';

        if (strengthPercent < 40) {
            strengthBar.style.background = '#e74c3c';
            strengthText.textContent = 'Weak password';
            strengthText.style.color = '#e74c3c';
        } else if (strengthPercent < 80) {
            strengthBar.style.background = '#f39c12';
            strengthText.textContent = 'Medium strength';
            strengthText.style.color = '#f39c12';
        } else {
            strengthBar.style.background = '#27ae60';
            strengthText.textContent = 'Strong password';
            strengthText.style.color = '#27ae60';
        }
    }

    function checkPasswordMatch() {
        const matchIndicator = document.getElementById('passwordMatch');
        if (!matchIndicator || !newPassword || !confirmPassword) return;

        if (newPassword.value && confirmPassword.value) {
            if (newPassword.value === confirmPassword.value) {
                matchIndicator.classList.add('show');
            } else {
                matchIndicator.classList.remove('show');
            }
        } else {
            matchIndicator.classList.remove('show');
        }
    }

    // Auto-hide alerts after 5 seconds
    const alerts = document.querySelectorAll('.alert');
    alerts.forEach(alert => {
        setTimeout(() => {
            const closeButton = alert.querySelector('.close');
            if (closeButton) {
                closeButton.click();
            }
        }, 5000);
    });

    // Add loading states to forms
    const forms = document.querySelectorAll('.profile-form');
    forms.forEach(form => {
        form.addEventListener('submit', function() {
            const submitBtn = this.querySelector('button[type="submit"]');
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
                
                // Re-enable button after 5 seconds in case of error
                setTimeout(() => {
                    submitBtn.disabled = false;
                    const originalText = form.id === 'profileForm' 
                        ? '<i class="fas fa-save"></i> Update Profile'
                        : '<i class="fas fa-key"></i> Change Password';
                    submitBtn.innerHTML = originalText;
                }, 5000);
            }
        });
    });
});
</script>