@extends('layouts.app')

@section('page_title', 'My Profile')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <div class="profile-image mb-3">
                        @if(isset($user['avatar']))
                            <img src="{{ $user['avatar'] }}" alt="Profile Picture" class="rounded-circle" style="width: 150px; height: 150px; object-fit: cover;">
                        @else
                            <div class="default-avatar rounded-circle d-flex align-items-center justify-content-center" style="width: 150px; height: 150px; background-color: #e9ecef; margin: 0 auto;">
                                <i class="fas fa-user fa-4x text-secondary"></i>
                            </div>
                        @endif
                        <div class="mt-2">
                            <label for="avatar" class="btn btn-sm btn-outline-primary">
                                Change Photo
                                <input type="file" id="avatar" name="avatar" class="d-none" accept="image/*">
                            </label>
                        </div>
                    </div>
                    <h4 class="mb-1">{{ $user['name'] ?? 'User Name' }}</h4>
                    <p class="text-muted">{{ $user['role'] ?? 'Role' }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Profile Information</h5>
                </div>
                <div class="card-body">
                    <form id="profileForm" method="POST" action="{{ route('profile.update') }}">
                        @csrf
                        @method('PUT')

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="firstName">First Name</label>
                                    <input type="text" class="form-control" id="firstName" name="firstName" value="{{ old('firstName', $user['firstName'] ?? '') }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="lastName">Last Name</label>
                                    <input type="text" class="form-control" id="lastName" name="lastName" value="{{ old('lastName', $user['lastName'] ?? '') }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="email" class="form-control" id="email" name="email" value="{{ old('email', $user['email'] ?? '') }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="phone">Phone Number</label>
                                    <input type="tel" class="form-control" id="phone" name="phone" value="{{ old('phone', $user['phone'] ?? '') }}">
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label for="address">Address</label>
                            <textarea class="form-control" id="address" name="address" rows="3">{{ old('address', $user['address'] ?? '') }}</textarea>
                        </div>

                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </form>

                    <hr>

                    <h5 class="mb-3">Change Password</h5>
                    <form id="passwordForm" method="POST" action="{{ route('profile.password.update') }}">
                        @csrf
                        @method('PUT')

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="currentPassword">Current Password</label>
                                    <input type="password" class="form-control" id="currentPassword" name="currentPassword" required>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="newPassword">New Password</label>
                                    <input type="password" class="form-control" id="newPassword" name="newPassword" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="confirmPassword">Confirm New Password</label>
                                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary">Update Password</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Profile form validation and submission
    $('#profileForm').validate({
        rules: {
            firstName: {
                required: true,
                minlength: 2
            },
            lastName: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            phone: {
                pattern: /^[0-9+\-\s()]*$/
            }
        },
        messages: {
            firstName: {
                required: "Please enter your first name",
                minlength: "First name must be at least 2 characters"
            },
            lastName: {
                required: "Please enter your last name",
                minlength: "Last name must be at least 2 characters"
            },
            email: {
                required: "Please enter your email address",
                email: "Please enter a valid email address"
            },
            phone: {
                pattern: "Please enter a valid phone number"
            }
        },
        submitHandler: function(form) {
            $.ajax({
                url: form.action,
                type: form.method,
                data: $(form).serialize(),
                success: function(response) {
                    toastr.success('Profile updated successfully');
                },
                error: function(xhr) {
                    const errors = xhr.responseJSON.errors;
                    Object.keys(errors).forEach(function(key) {
                        toastr.error(errors[key][0]);
                    });
                }
            });
        }
    });

    // Password form validation and submission
    $('#passwordForm').validate({
        rules: {
            currentPassword: {
                required: true,
                minlength: 8
            },
            newPassword: {
                required: true,
                minlength: 8
            },
            confirmPassword: {
                required: true,
                equalTo: "#newPassword"
            }
        },
        messages: {
            currentPassword: {
                required: "Please enter your current password",
                minlength: "Password must be at least 8 characters"
            },
            newPassword: {
                required: "Please enter a new password",
                minlength: "Password must be at least 8 characters"
            },
            confirmPassword: {
                required: "Please confirm your new password",
                equalTo: "Passwords do not match"
            }
        },
        submitHandler: function(form) {
            $.ajax({
                url: form.action,
                type: form.method,
                data: $(form).serialize(),
                success: function(response) {
                    toastr.success('Password updated successfully');
                    form.reset();
                },
                error: function(xhr) {
                    const errors = xhr.responseJSON.errors;
                    Object.keys(errors).forEach(function(key) {
                        toastr.error(errors[key][0]);
                    });
                }
            });
        }
    });

    // Avatar upload
    $('#avatar').change(function() {
        const file = this.files[0];
        if (file) {
            const formData = new FormData();
            formData.append('avatar', file);

            $.ajax({
                url: '{{ route("profile.avatar.update") }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    toastr.success('Profile picture updated successfully');
                    location.reload();
                },
                error: function(xhr) {
                    toastr.error('Failed to update profile picture');
                }
            });
        }
    });
});
</script>
@endpush

@push('styles')
<style>
.profile-image img {
    border: 5px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.card {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
</style>
@endpush