@extends('layouts.user')

@section('title', 'Edit Profile')
@section('page-title', 'Edit Profile')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white py-3">
                <h5 class="mb-0"><i class="fas fa-user-edit me-2"></i>Edit Profile</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('user.profile.update') }}" method="POST">
                    @csrf
                    @method('PUT')
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="name" class="form-label">Full Name *</label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                       id="name" name="name" value="{{ old('name', auth()->user()->name) }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="email" class="form-label">Email Address *</label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                       id="email" name="email" value="{{ old('email', auth()->user()->email) }}" required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="mobile" class="form-label">Mobile Number *</label>
                                <input type="text" class="form-control @error('mobile') is-invalid @enderror" 
                                       id="mobile" name="mobile" value="{{ old('mobile', auth()->user()->mobile) }}" required>
                                @error('mobile')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="company" class="form-label">Company Name (Optional)</label>
                                <input type="text" class="form-control @error('company') is-invalid @enderror" 
                                       id="company" name="company" value="{{ old('company', auth()->user()->company) }}">
                                @error('company')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="address" class="form-label">Address (Optional)</label>
                        <textarea class="form-control @error('address') is-invalid @enderror" 
                                  id="address" name="address" rows="3">{{ old('address', auth()->user()->address) }}</textarea>
                        @error('address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <hr class="my-4">

                    <h6 class="mb-3">Notification Preferences</h6>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="email_notifications" 
                                           id="email_notifications" value="1" 
                                           {{ old('email_notifications', auth()->user()->email_notifications) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="email_notifications">
                                        Email Notifications
                                    </label>
                                </div>
                                <small class="form-text text-muted">
                                    Receive notifications about account activity via email
                                </small>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="sms_notifications" 
                                           id="sms_notifications" value="1" 
                                           {{ old('sms_notifications', auth()->user()->sms_notifications) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="sms_notifications">
                                        SMS Notifications
                                    </label>
                                </div>
                                <small class="form-text text-muted">
                                    Receive important alerts via SMS
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-info">
                        <h6 class="alert-heading"><i class="fas fa-info-circle me-2"></i>Profile Information</h6>
                        <ul class="mb-0">
                            <li>Keep your profile information up to date</li>
                            <li>Your mobile number is used for important alerts and OTP verification</li>
                            <li>Email is used for account notifications and password resets</li>
                            <li>Enable notifications to stay updated with your account activity</li>
                        </ul>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('user.dashboard') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Update Profile
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Change Password -->
        <div class="card shadow mt-4">
            <div class="card-header bg-warning text-white py-3">
                <h5 class="mb-0"><i class="fas fa-key me-2"></i>Change Password</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('user.password.update') }}" method="POST">
                    @csrf
                    @method('PUT')
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="current_password" class="form-label">Current Password *</label>
                                <div class="input-group">
                                    <input type="password" class="form-control @error('current_password') is-invalid @enderror" 
                                           id="current_password" name="current_password" required>
                                    <button type="button" class="btn btn-outline-secondary toggle-password" 
                                            data-target="current_password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                @error('current_password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="new_password" class="form-label">New Password *</label>
                                <div class="input-group">
                                    <input type="password" class="form-control @error('new_password') is-invalid @enderror" 
                                           id="new_password" name="new_password" required>
                                    <button type="button" class="btn btn-outline-secondary toggle-password" 
                                            data-target="new_password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                @error('new_password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="new_password_confirmation" class="form-label">Confirm Password *</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" 
                                           id="new_password_confirmation" name="new_password_confirmation" required>
                                    <button type="button" class="btn btn-outline-secondary toggle-password" 
                                            data-target="new_password_confirmation">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Password Strength Meter -->
                    <div class="password-strength mb-3">
                        <div class="progress" style="height: 5px;">
                            <div class="progress-bar" id="password-strength-bar" 
                                 role="progressbar" style="width: 0%"></div>
                        </div>
                        <small class="text-muted" id="password-strength-text">
                            Password strength: Very Weak
                        </small>
                    </div>

                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Password Requirements:</strong>
                        <ul class="mb-0 mt-2">
                            <li>At least 8 characters long</li>
                            <li>Contains uppercase and lowercase letters</li>
                            <li>Includes numbers and special characters</li>
                            <li>Not similar to your personal information</li>
                        </ul>
                    </div>

                    <div class="text-end">
                        <button type="submit" class="btn btn-warning" id="changePasswordBtn">
                            <i class="fas fa-key me-2"></i>Change Password
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Account Information -->
        <div class="card shadow mt-4">
            <div class="card-header bg-info text-white py-3">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Account Information</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item mb-3">
                            <strong>Account Type:</strong><br>
                            <span class="badge bg-primary text-capitalize">{{ auth()->user()->role }}</span>
                        </div>
                        <div class="info-item mb-3">
                            <strong>KYC Status:</strong><br>
                            @if(auth()->user()->kyc_verified)
                                <span class="badge bg-success">Verified</span>
                            @else
                                <span class="badge bg-warning">Pending</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-item mb-3">
                            <strong>Member Since:</strong><br>
                            <span class="text-muted">{{ auth()->user()->created_at->format('M j, Y') }}</span>
                        </div>
                        <div class="info-item">
                            <strong>Last Login:</strong><br>
                            <span class="text-muted">
                                @if(auth()->user()->last_login_at)
                                    {{ auth()->user()->last_login_at->diffForHumans() }}
                                @else
                                    Never
                                @endif
                            </span>
                        </div>
                    </div>
                </div>
                
                @if(auth()->user()->reseller)
                <hr>
                <div class="info-item">
                    <strong>Reseller:</strong><br>
                    <span class="text-muted">{{ auth()->user()->reseller->company_name }}</span>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Toggle password visibility
    $('.toggle-password').click(function() {
        const target = $(this).data('target');
        const input = $('#' + target);
        const icon = $(this).find('i');
        
        if (input.attr('type') === 'password') {
            input.attr('type', 'text');
            icon.removeClass('fa-eye').addClass('fa-eye-slash');
        } else {
            input.attr('type', 'password');
            icon.removeClass('fa-eye-slash').addClass('fa-eye');
        }
    });

    // Password strength meter
    $('#new_password').on('input', function() {
        const password = $(this).val();
        const strength = calculatePasswordStrength(password);
        const bar = $('#password-strength-bar');
        const text = $('#password-strength-text');
        
        bar.css('width', strength.percentage + '%');
        bar.removeClass('bg-danger bg-warning bg-info bg-success');
        bar.addClass(strength.class);
        text.text('Password strength: ' + strength.text);
        text.removeClass('text-danger text-warning text-info text-success');
        text.addClass(strength.textClass);
    });

    function calculatePasswordStrength(password) {
        let score = 0;
        
        if (password.length >= 8) score += 25;
        if (password.match(/[a-z]/) && password.match(/[A-Z]/)) score += 25;
        if (password.match(/\d/)) score += 25;
        if (password.match(/[^a-zA-Z\d]/)) score += 25;
        
        if (score >= 90) {
            return { percentage: 100, class: 'bg-success', text: 'Very Strong', textClass: 'text-success' };
        } else if (score >= 70) {
            return { percentage: 75, class: 'bg-info', text: 'Strong', textClass: 'text-info' };
        } else if (score >= 50) {
            return { percentage: 50, class: 'bg-warning', text: 'Medium', textClass: 'text-warning' };
        } else if (score >= 25) {
            return { percentage: 25, class: 'bg-danger', text: 'Weak', textClass: 'text-danger' };
        } else {
            return { percentage: 0, class: 'bg-danger', text: 'Very Weak', textClass: 'text-danger' };
        }
    }

    // Form submission validation
    $('form').submit(function() {
        const newPassword = $('#new_password').val();
        if (newPassword && newPassword.length < 8) {
            toastr.error('New password must be at least 8 characters long');
            return false;
        }
    });
});
</script>
@endpush

@push('styles')
<style>
.info-item {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.info-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.password-strength .progress {
    margin-bottom: 5px;
}

.toggle-password {
    border-left: none;
}

.toggle-password:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
}
</style>
@endpush