@extends('crm.master')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

<div class="page-header">
    <div class="page-leftheader">
        <h4 class="page-title">My Profile</h4>
    </div>
</div>

@include('crm.components.alerts')


<!-- Edit Profile Section -->
<div class="row mt-3">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Edit Profile</div>
            </div>
            <div class="card-body">
                <form action="{{ route('crm.profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <!-- First Name -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">First Name <span class="text-danger">*</span></label>
                                <input type="text" name="first_name" class="form-control @error('first_name') is-invalid @enderror" 
                                    placeholder="Enter first name" value="{{ old('first_name', $user->first_name) }}" required>
                                @error('first_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Last Name -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Last Name <span class="text-danger">*</span></label>
                                <input type="text" name="last_name" class="form-control @error('last_name') is-invalid @enderror" 
                                    placeholder="Enter last name" value="{{ old('last_name', $user->last_name) }}" required>
                                @error('last_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Profile Picture -->
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Profile Picture</label>
                                
                                @if ($user->picture)
                                    <div class="mb-2">
                                        <img src="{{ asset('storage/profile/' . $user->picture) }}" 
                                            alt="Profile" class="img-thumbnail" style="max-width: 150px;">
                                    </div>
                                @endif

                                <input type="file" name="picture" class="form-control @error('picture') is-invalid @enderror" 
                                    accept="image/*" onchange="previewImage(this)">
                                <small class="text-muted">Accepted formats: JPEG, PNG, JPG, GIF. Max size: 2MB</small>
                                @error('picture')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror

                                <!-- Image Preview -->
                                <div id="imagePreview" class="mt-2"></div>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer text-end mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="ti tabler-check me-1"></i> Update Profile
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Profile Summary Sidebar -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body text-center">
                @if ($user->picture)
                    <img src="{{ asset('storage/profile/' . $user->picture) }}" 
                        alt="Profile" class="avatar avatar-xl brround mb-3">
                @else
                    <div class="avatar avatar-xl brround mb-3 bg-secondary text-white d-inline-flex align-items-center justify-content-center" 
                        style="width: 100px; height: 100px; font-size: 36px;">
                        {{ strtoupper(substr($user->first_name, 0, 1)) }}{{ strtoupper(substr($user->last_name, 0, 1)) }}
                    </div>
                @endif

                <h5 class="mb-1">{{ $user->first_name }} {{ $user->last_name }}</h5>
                <p class="text-muted mb-0">{{ $user->email }}</p>

                <div class="mt-3">
                    <span class="badge bg-info">{{ ucfirst($user->role) }}</span>
                </div>

                <div class="mt-4">
                    <small class="text-muted">
                        <i class="ti tabler-calendar"></i> 
                        Joined {{ $user->created_at->format('M d, Y') }}
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Update Email Section -->
<div class="row mt-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Update Email</div>
            </div>
            <div class="card-body">
                <form action="{{ route('crm.profile.update-email') }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Email Address <span class="text-danger">*</span></label>
                                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" 
                                    placeholder="Enter email address" value="{{ old('email', $user->email) }}" required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="card-footer text-end mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="ti tabler-check me-1"></i> Update Email
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Update Password Section -->
<div class="row mt-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Update Password</div>
            </div>
            <div class="card-body">
                <form action="{{ route('crm.profile.update-password') }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <!-- Current Password -->
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Current Password <span class="text-danger">*</span></label>
                                <input type="password" name="current_password" class="form-control @error('current_password') is-invalid @enderror" 
                                    placeholder="Enter current password" required>
                                @error('current_password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- New Password -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">New Password <span class="text-danger">*</span></label>
                                <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" 
                                    placeholder="Enter new password" required>
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Minimum 8 characters</small>
                            </div>
                        </div>

                        <!-- Confirm Password -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Confirm Password <span class="text-danger">*</span></label>
                                <input type="password" name="password_confirmation" class="form-control" 
                                    placeholder="Confirm password" required>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer text-end mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="ti tabler-check me-1"></i> Update Password
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function previewImage(input) {
        const preview = document.getElementById('imagePreview');
        
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function (e) {
                preview.innerHTML = '<img src="' + e.target.result + '" class="img-thumbnail mt-2" style="max-width: 150px;">';
            }
            reader.readAsDataURL(input.files[0]);
        } else {
            preview.innerHTML = '';
        }
    }
</script>
</div>
@endsection