@extends('layouts.admin')

@section('title', 'Profile')

@section('content')
<div class="row g-3">
    <div class="col-xxl-4">
        <div class="card border h-100">
            <div class="card-body">
                <div class="text-center">
                    <div class="avatar avatar-5xl">
                        <div class="avatar-name rounded-circle bg-primary">
                            <span class="text-white">{{ substr(auth('admin')->user()->name, 0, 1) }}</span>
                        </div>
                    </div>
                    <h5 class="mt-3 mb-1">{{ auth('admin')->user()->name }}</h5>
                    <p class="text-body-tertiary mb-3">System Administrator</p>
                    <p class="text-body-secondary mb-4">{{ auth('admin')->user()->email }}</p>
                    
                    <div class="row g-3 text-center mb-4">
                        <div class="col-6">
                            <h5 class="text-body-emphasis mb-0">24</h5>
                            <p class="text-body-tertiary mb-0 fs-10">Active Projects</p>
                        </div>
                        <div class="col-6">
                            <h5 class="text-body-emphasis mb-0">1.2k</h5>
                            <p class="text-body-tertiary mb-0 fs-10">Total Users</p>
                        </div>
                    </div>
                    
                    <button class="btn btn-phoenix-primary" data-bs-toggle="modal" data-bs-target="#editProfileModal">
                        <span class="fas fa-edit me-2"></span>Edit Profile
                    </button>
                </div>
            </div>
        </div>

        <div class="card border h-100 mt-3">
            <div class="card-header border-bottom">
                <h6 class="mb-0">Account Details</h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="d-flex justify-content-between">
                        <span class="text-body-secondary">Full Name</span>
                        <span class="text-body-emphasis">{{ auth('admin')->user()->name }}</span>
                    </div>
                </div>
                <hr class="my-3">
                <div class="mb-3">
                    <div class="d-flex justify-content-between">
                        <span class="text-body-secondary">Email</span>
                        <span class="text-body-emphasis">{{ auth('admin')->user()->email }}</span>
                    </div>
                </div>
                <hr class="my-3">
                <div class="mb-3">
                    <div class="d-flex justify-content-between">
                        <span class="text-body-secondary">Role</span>
                        <span class="badge badge-phoenix badge-phoenix-primary">Administrator</span>
                    </div>
                </div>
                <hr class="my-3">                <div class="mb-3">
                    <div class="d-flex justify-content-between">
                        <span class="text-body-secondary">Member Since</span>
                        <span class="text-body-emphasis">{{ auth('admin')->user()->created_at->format('F d, Y') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title mb-0">Edit Profile</h6>
            </div>
            <div class="card-body">
                <form>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="firstName" class="form-label">First Name</label>
                                <input type="text" class="form-control" id="firstName" value="Admin">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="lastName" class="form-label">Last Name</label>
                                <input type="text" class="form-control" id="lastName" value="User">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label">Email Address</label>
                        <input type="email" class="form-control" id="email" value="{{ auth('admin')->user()->email }}">
                    </div>

                    <div class="mb-3">
                        <label for="phone" class="form-label">Phone Number</label>
                        <input type="tel" class="form-control" id="phone" placeholder="+1 (555) 123-4567">
                    </div>

                    <div class="mb-3">
                        <label for="bio" class="form-label">Bio</label>
                        <textarea class="form-control" id="bio" rows="4" placeholder="Tell us about yourself..."></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="location" class="form-label">Location</label>
                        <input type="text" class="form-control" id="location" placeholder="City, Country">
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-outline-secondary me-2">Cancel</button>
                        <button type="submit" class="btn btn-phoenix">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h6 class="card-title mb-0">Change Password</h6>
            </div>
            <div class="card-body">
                <form>
                    <div class="mb-3">
                        <label for="currentPassword" class="form-label">Current Password</label>
                        <input type="password" class="form-control" id="currentPassword">
                    </div>

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

                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-phoenix">Update Password</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h6 class="card-title mb-0">Recent Activity</h6>
            </div>
            <div class="card-body">
                <div class="activity-list">
                    <div class="activity-item d-flex align-items-start mb-4">
                        <div class="avatar-sm me-3">
                            <div class="bg-success rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                <i class="uil uil-check text-white"></i>
                            </div>
                        </div>
                        <div>
                            <h6 class="mb-1">Profile updated successfully</h6>
                            <p class="text-muted mb-0 small">Updated personal information and preferences</p>
                            <small class="text-muted">2 hours ago</small>
                        </div>
                    </div>

                    <div class="activity-item d-flex align-items-start mb-4">
                        <div class="avatar-sm me-3">
                            <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                <i class="uil uil-sign-in-alt text-white"></i>
                            </div>
                        </div>
                        <div>
                            <h6 class="mb-1">Logged in to admin panel</h6>
                            <p class="text-muted mb-0 small">Accessed from IP: 192.168.1.100</p>
                            <small class="text-muted">5 hours ago</small>
                        </div>
                    </div>

                    <div class="activity-item d-flex align-items-start mb-4">
                        <div class="avatar-sm me-3">
                            <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                <i class="uil uil-users-alt text-white"></i>
                            </div>
                        </div>
                        <div>
                            <h6 class="mb-1">User management action</h6>
                            <p class="text-muted mb-0 small">Approved 3 new user registrations</p>
                            <small class="text-muted">1 day ago</small>
                        </div>
                    </div>

                    <div class="activity-item d-flex align-items-start">
                        <div class="avatar-sm me-3">
                            <div class="bg-info rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                <i class="uil uil-setting text-white"></i>
                            </div>
                        </div>
                        <div>
                            <h6 class="mb-1">System settings updated</h6>
                            <p class="text-muted mb-0 small">Modified application configuration</p>
                            <small class="text-muted">2 days ago</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection