@extends('layouts.app')

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

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="mb-4">
            <h4 class="mb-0 fw-bold">User Account Settings</h4>
            <p class="text-muted small">Update your personal information and security credentials.</p>
        </div>

        @if(session('success'))
            <div class="alert alert-success border-0 shadow-sm mb-4">
                {{ session('success') }}
            </div>
        @endif

        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
            <div class="card-body p-4 p-md-5">
                <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="text-center mb-5">
                        <div class="position-relative d-inline-block">
                            <img src="{{ $user->avatar ? asset('storage/' . $user->avatar) : 'https://ui-avatars.com/api/?name=' . urlencode($user->name) . '&background=3b82f6&color=fff&size=256' }}" 
                                 id="profileImagePreview"
                                 class="rounded-circle border border-4 border-white shadow-sm" 
                                 width="120" height="120" alt="Avatar">
                            <label for="avatarUpload" class="position-absolute bottom-0 end-0 bg-primary text-white rounded-circle p-2 shadow-sm cursor-pointer" style="margin-right: -5px; margin-bottom: -5px;">
                                <i class="bi bi-camera-fill small"></i>
                                <input type="file" name="avatar" id="avatarUpload" class="d-none" accept="image/*" onchange="previewImage(this)">
                            </label>
                        </div>
                        <h5 class="mt-3 fw-bold mb-0">{{ $user->name }}</h5>
                        <p class="text-muted small">{{ $user->email }}</p>
                    </div>

                    <div class="row g-4">
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-uppercase opacity-75">Full Name</label>
                            <input type="text" name="name" class="form-control form-control-lg" value="{{ old('name', $user->name) }}" required>
                            @error('name') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-uppercase opacity-75">Email Address</label>
                            <input type="email" name="email" class="form-control form-control-lg" value="{{ old('email', $user->email) }}" required>
                            @error('email') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                        <hr class="my-4 opacity-50">
                        
                        <div class="col-md-12">
                            <h6 class="fw-bold mb-3">Security & Password</h6>
                            <p class="text-muted small mb-4">Leave password fields blank if you don't want to change them.</p>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-uppercase opacity-75">New Password</label>
                            <input type="password" name="password" class="form-control form-control-lg" placeholder="••••••••">
                            @error('password') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-uppercase opacity-75">Confirm Password</label>
                            <input type="password" name="password_confirmation" class="form-control form-control-lg" placeholder="••••••••">
                        </div>
                    </div>

                    <div class="mt-5 text-end">
                        <button type="submit" class="btn btn-primary px-5 py-3 fw-bold shadow-sm">
                            Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function previewImage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('profileImagePreview').src = e.target.result;
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
<style>
    .form-control:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    }
    .form-label { margin-bottom: 0.6rem; }
    .btn-primary {
        border-radius: 1rem;
        transition: all 0.3s;
    }
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
    }
</style>
@endsection