@extends('layouts.main')

@section('otherCss')
<style>
.profile-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    color: white;
    padding: 2rem;
    margin-bottom: 2rem;
}

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    font-size: 3rem;
    margin: 0 auto 1rem;
    position: relative;
    overflow: hidden;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
    border-radius: 50%;
}

.profile-avatar:hover .avatar-upload-overlay {
    opacity: 1;
}

.avatar-upload-text {
    font-size: 0.75rem;
    text-align: center;
    color: white;
}

.info-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.info-label {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.info-value {
    font-size: 1.1rem;
    color: #212529;
    font-weight: 500;
}

.password-strength {
    height: 4px;
    border-radius: 2px;
    margin-top: 0.5rem;
    background: #e9ecef;
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    transition: all 0.3s ease;
}

.strength-weak { background: #dc3545; width: 25%; }
.strength-fair { background: #ffc107; width: 50%; }
.strength-good { background: #28a745; width: 75%; }
.strength-strong { background: #007bff; width: 100%; }

.avatar-actions {
    margin-top: 1rem;
    text-align: center;
}

.avatar-actions .btn {
    margin: 0 0.25rem;
    font-size: 0.875rem;
}

.readonly-field {
    background-color: #f8f9fa;
    border-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

.readonly-field:focus {
    background-color: #f8f9fa;
    border-color: #e9ecef;
    box-shadow: none;
}
</style>
@endsection

@section('contents')
    <div class="container-fluid">
        <!-- Page-Title -->
        <x-bread-crumbs>
            <div class="float-right">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active">My Profile</li>
                </ol>
            </div>
            <h4 class="page-title">MSPDCL Surya Ghar</h4>
        </x-bread-crumbs>

        <div class="row">
            <!-- Profile Information -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="profile-card">
                        <div class="text-center">
                            <div class="profile-avatar" onclick="triggerAvatarUpload()">
                                @if($user->avatar)
                                    <img src="{{ asset('uploads/avatars/' . $user->avatar) }}" alt="{{ $user->name }}" id="avatar-display">
                                @else
                                    <span id="avatar-initial">{{ strtoupper(substr($user->name, 0, 1)) }}</span>
                                @endif
                                <div class="avatar-upload-overlay">
                                    <div class="avatar-upload-text">
                                        <i class="mdi mdi-camera mb-1"></i><br>
                                        Change Photo
                                    </div>
                                </div>
                            </div>
                            <h3 class="mb-1">{{ $user->name }}</h3>
                            <p class="mb-2 opacity-75">{{ $user->email }}</p>
                            <span class="badge badge-light user-type-badge">Consumer</span>
                            <p class="mt-3 mb-0 opacity-75">
                                <i class="mdi mdi-calendar-clock mr-2"></i>
                                Member since {{ $user->created_at->format('F Y') }}
                            </p>
                        </div>
                        
                        <!-- Hidden file input for avatar upload -->
                        <input type="file" id="avatar-upload" name="avatar" accept="image/*" style="display: none;">
                        
                        <div class="avatar-actions">
                            <button type="button" class="btn btn-sm btn-light" onclick="triggerAvatarUpload()">
                                <i class="mdi mdi-upload mr-1"></i>Upload Photo
                            </button>
                            @if($user->avatar)
                            <button type="button" class="btn btn-sm btn-outline-light" onclick="removeAvatar()">
                                <i class="mdi mdi-delete mr-1"></i>Remove
                            </button>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Consumer Information (Read-only) -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title mb-3">
                            <i class="mdi mdi-account-card-details mr-2"></i>Consumer Information
                        </h5>
                        
                        <div class="info-card">
                            <div class="info-label">Consumer ID</div>
                            <div class="info-value">{{ $consumer->consumer_id }}</div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-label">Consumer Number</div>
                            <div class="info-value">{{ $consumer->consumer_no }}</div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-label">Phone Number</div>
                            <div class="info-value">{{ $consumer->phone ?: 'Not provided' }}</div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-label">Category</div>
                            <div class="info-value">{{ $consumer->category->name ?? 'Not specified' }}</div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-label">Sub Division</div>
                            <div class="info-value">{{ $consumer->subDivision->name ?? 'Not specified' }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Update Password -->
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
                        <h4 class="header-title">
                            <i class="mdi mdi-lock-reset mr-2"></i>Change Password
                        </h4>
                        <p class="text-muted mb-4">Ensure your account is using a long, random password to stay secure.</p>
                        
                        <form id="consumer-profile-form" action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            
                            <!-- Read-only fields for reference -->
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="name_readonly">Full Name (Read-only)</label>
                                        <input type="text" class="form-control readonly-field" id="name_readonly" value="{{ $user->name }}" readonly>
                                        <small class="text-muted">Contact admin to change your name</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email_readonly">Email Address (Read-only)</label>
                                        <input type="email" class="form-control readonly-field" id="email_readonly" value="{{ $user->email }}" readonly>
                                        <small class="text-muted">Contact admin to change your email</small>
                                    </div>
                                </div>
                            </div>

                            <hr class="my-4">
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="current_password">Current Password</label>
                                        <input type="password" class="form-control" id="current_password" name="current_password" placeholder="Enter current password">
                                        <small class="text-muted">Required only if changing password</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="new_password">New Password</label>
                                        <input type="password" class="form-control" id="new_password" name="new_password" placeholder="Enter new password">
                                        <div class="password-strength">
                                            <div class="password-strength-bar" id="password-strength-bar"></div>
                                        </div>
                                        <small class="text-muted" id="password-strength-text"></small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="new_password_confirmation">Confirm New Password</label>
                                        <input type="password" class="form-control" id="new_password_confirmation" name="new_password_confirmation" placeholder="Confirm new password">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mt-4">
                                <button type="submit" class="btn btn-gradient-primary">
                                    <i class="mdi mdi-content-save mr-2"></i>Update Password
                                </button>
                                <button type="button" class="btn btn-light" onclick="resetPasswordForm()">
                                    <i class="mdi mdi-refresh mr-2"></i>Clear
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title mb-3">
                            <i class="mdi mdi-lightning-bolt mr-2"></i>Quick Actions
                        </h5>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-card text-center">
                                    <i class="mdi mdi-file-document display-4 text-primary mb-2"></i>
                                    <h6>PPA Agreement</h6>
                                    <p class="text-muted mb-3">Download your Power Purchase Agreement</p>
                                    <a href="{{ route('download-ppa-agreement') }}" class="btn btn-outline-primary btn-sm">
                                        <i class="mdi mdi-download mr-1"></i>Download
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-card text-center">
                                    <i class="mdi mdi-upload display-4 text-success mb-2"></i>
                                    <h6>Upload Documents</h6>
                                    <p class="text-muted mb-3">Upload your signed PPA and documents</p>
                                    <a href="{{ route('upload-ppa-agreement') }}" class="btn btn-outline-success btn-sm">
                                        <i class="mdi mdi-upload mr-1"></i>Upload
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('otherJs')
<script>
$(document).ready(function() {
    // Handle profile form submission
    $("#consumer-profile-form").on("submit", function(e) {
        e.preventDefault();
        
        // Only validate if password fields are filled
        const currentPassword = $('#current_password').val();
        const newPassword = $('#new_password').val();
        const confirmPassword = $('#new_password_confirmation').val();
        
        if (newPassword || confirmPassword || currentPassword) {
            if (!currentPassword) {
                Swal.fire('Error!', 'Please enter your current password to change it.', 'error');
                return;
            }
            if (!newPassword) {
                Swal.fire('Error!', 'Please enter a new password.', 'error');
                return;
            }
            if (newPassword !== confirmPassword) {
                Swal.fire('Error!', 'Password confirmation does not match.', 'error');
                return;
            }
            if (newPassword.length < 8) {
                Swal.fire('Error!', 'Password must be at least 8 characters long.', 'error');
                return;
            }
        }
        
        loader.showBodyLoader();
        
        const formData = new FormData(this);
        
        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                loader.hideBodyLoader();
                if (response.status === 1) {
                    Swal.fire('Success!', response.message, 'success');
                    // Clear password fields
                    $('#current_password, #new_password, #new_password_confirmation').val('');
                    $('#password-strength-bar').removeClass().addClass('password-strength-bar');
                    $('#password-strength-text').text('');
                }
            },
            error: function(xhr) {
                loader.hideBodyLoader();
                const response = xhr.responseJSON;
                if (response && response.errors) {
                    let errorMsg = '';
                    Object.keys(response.errors).forEach(key => {
                        errorMsg += response.errors[key][0] + '\n';
                    });
                    Swal.fire('Validation Error!', errorMsg, 'error');
                } else {
                    Swal.fire('Error!', response.message || 'Something went wrong!', 'error');
                }
            }
        });
    });

    // Handle avatar upload
    $('#avatar-upload').on('change', function() {
        const file = this.files[0];
        if (file) {
            // Validate file size (2MB)
            if (file.size > 2048000) {
                Swal.fire('Error!', 'Image size must be less than 2MB.', 'error');
                return;
            }
            
            // Validate file type
            if (!file.type.match('image.*')) {
                Swal.fire('Error!', 'Please select a valid image file.', 'error');
                return;
            }
            
            uploadAvatar(file);
        }
    });

    // Password strength checker
    $('#new_password').on('input', function() {
        const password = $(this).val();
        const strengthBar = $('#password-strength-bar');
        const strengthText = $('#password-strength-text');
        
        if (password.length === 0) {
            strengthBar.removeClass().addClass('password-strength-bar');
            strengthText.text('');
            return;
        }
        
        let strength = 0;
        if (password.length >= 8) strength++;
        if (password.match(/[a-z]+/)) strength++;
        if (password.match(/[A-Z]+/)) strength++;
        if (password.match(/[0-9]+/)) strength++;
        if (password.match(/[$@#&!]+/)) strength++;
        
        strengthBar.removeClass();
        strengthBar.addClass('password-strength-bar');
        
        switch(strength) {
            case 0:
            case 1:
                strengthBar.addClass('strength-weak');
                strengthText.text('Weak').removeClass().addClass('text-danger');
                break;
            case 2:
                strengthBar.addClass('strength-fair');
                strengthText.text('Fair').removeClass().addClass('text-warning');
                break;
            case 3:
            case 4:
                strengthBar.addClass('strength-good');
                strengthText.text('Good').removeClass().addClass('text-success');
                break;
            case 5:
                strengthBar.addClass('strength-strong');
                strengthText.text('Strong').removeClass().addClass('text-primary');
                break;
        }
    });
});

function triggerAvatarUpload() {
    $('#avatar-upload').click();
}

function uploadAvatar(file) {
    loader.showBodyLoader();
    
    const formData = new FormData();
    formData.append('avatar', file);
    formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
    
    $.ajax({
        url: '{{ route("profile.update") }}',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            loader.hideBodyLoader();
            if (response.status === 1) {
                if (response.avatar_url) {
                    $('#avatar-display').attr('src', response.avatar_url);
                    $('#avatar-initial').hide();
                    if ($('#avatar-display').length === 0) {
                        $('.profile-avatar').html('<img src="' + response.avatar_url + '" alt="{{ $user->name }}" id="avatar-display"><div class="avatar-upload-overlay"><div class="avatar-upload-text"><i class="mdi mdi-camera mb-1"></i><br>Change Photo</div></div>');
                    }
                    // Add remove button if not exists
                    if ($('.avatar-actions .btn-outline-light').length === 0) {
                        $('.avatar-actions').append('<button type="button" class="btn btn-sm btn-outline-light" onclick="removeAvatar()"><i class="mdi mdi-delete mr-1"></i>Remove</button>');
                    }
                }
                Swal.fire('Success!', response.message, 'success');
            }
        },
        error: function(xhr) {
            loader.hideBodyLoader();
            const response = xhr.responseJSON;
            Swal.fire('Error!', response.message || 'Avatar upload failed!', 'error');
        }
    });
}

function removeAvatar() {
    Swal.fire({
        title: 'Remove Avatar?',
        text: 'Are you sure you want to remove your profile picture?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, remove it!',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            loader.showBodyLoader();
            
            $.ajax({
                url: '{{ route("profile.remove-avatar") }}',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    loader.hideBodyLoader();
                    if (response.status === 1) {
                        $('.profile-avatar').html('<span id="avatar-initial">{{ strtoupper(substr($user->name, 0, 1)) }}</span><div class="avatar-upload-overlay"><div class="avatar-upload-text"><i class="mdi mdi-camera mb-1"></i><br>Change Photo</div></div>');
                        $('.btn-outline-light').remove();
                        Swal.fire('Removed!', response.message, 'success');
                    }
                },
                error: function(xhr) {
                    loader.hideBodyLoader();
                    const response = xhr.responseJSON;
                    Swal.fire('Error!', response.message || 'Something went wrong!', 'error');
                }
            });
        }
    });
}

function resetPasswordForm() {
    $('#current_password, #new_password, #new_password_confirmation').val('');
    $('#password-strength-bar').removeClass().addClass('password-strength-bar');
    $('#password-strength-text').text('');
}
</script>
@endsection