@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2><i class="fas fa-user-circle me-2"></i>My Profile</h2>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <!-- Profile Sidebar -->
        <div class="col-lg-4 col-md-5 mb-4">
            <div class="card profile-card">
                <div class="card-body text-center">
                    <div class="profile-avatar-large mb-3">
                        {{ strtoupper(substr(Auth::user()->name, 0, 2)) }}
                    </div>
                    <h4 class="mb-1">{{ Auth::user()->name }}</h4>
                    <p class="text-muted mb-3">{{ Auth::user()->email }}</p>
                    <span class="badge badge-role bg-{{ Auth::user()->role === 'admin' ? 'danger' : (Auth::user()->role === 'loan_officer' ? 'primary' : (Auth::user()->role === 'auditor' ? 'warning' : 'secondary')) }} mb-3">
                        {{ ucfirst(str_replace('_', ' ', Auth::user()->role)) }}
                    </span>

                    <div class="profile-stats mt-4">
                        <div class="row text-center">
                            <div class="col-4">
                                <div class="stat-number">{{ Auth::user()->created_at->diffInDays(now()) }}</div>
                                <div class="stat-label">Days Active</div>
                            </div>
                            <div class="col-4">
                                <div class="stat-number">{{ Auth::user()->email_verified_at ? 'Verified' : 'Pending' }}</div>
                                <div class="stat-label">Email Status</div>
                            </div>
                            <div class="col-4">
                                <div class="stat-number">{{ Auth::user()->id }}</div>
                                <div class="stat-label">User ID</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Account Information -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Account Information</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <td><strong>User ID:</strong></td>
                            <td class="text-end">{{ Auth::user()->id }}</td>
                        </tr>
                        <tr>
                            <td><strong>Role:</strong></td>
                            <td class="text-end">{{ ucfirst(Auth::user()->role) }}</td>
                        </tr>
                        <tr>
                            <td><strong>Member Since:</strong></td>
                            <td class="text-end">{{ Auth::user()->created_at->format('M d, Y') }}</td>
                        </tr>
                        <tr>
                            <td><strong>Last Updated:</strong></td>
                            <td class="text-end">{{ Auth::user()->updated_at->format('M d, Y') }}</td>
                        </tr>
                        <tr>
                            <td><strong>Email Verified:</strong></td>
                            <td class="text-end">
                                @if(Auth::user()->email_verified_at)
                                    <span class="badge bg-success">Yes</span>
                                @else
                                    <span class="badge bg-warning">No</span>
                                @endif
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0"><i class="fas fa-bolt me-2"></i>Quick Actions</h6>
                </div>
                <div class="list-group list-group-flush">
                    <a href="#profile-tab" class="list-group-item list-group-item-action active" data-bs-toggle="tab">
                        <i class="fas fa-user me-2 text-primary"></i>Profile Information
                    </a>
                    <a href="#security-tab" class="list-group-item list-group-item-action" data-bs-toggle="tab">
                        <i class="fas fa-shield-alt me-2 text-warning"></i>Change Password
                    </a>
                    @if(Auth::user()->hasPermission('users.view'))
                    <a href="{{ route('users.index') }}" class="list-group-item list-group-item-action">
                        <i class="fas fa-users me-2 text-info"></i>Manage Users
                    </a>
                    @endif
                </div>
            </div>
        </div>

        <!-- Profile Content -->
        <div class="col-lg-8 col-md-7">
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="profile-tab-link" data-bs-toggle="tab" href="#profile-tab" role="tab">
                                <i class="fas fa-user me-2"></i>Profile Information
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="security-tab-link" data-bs-toggle="tab" href="#security-tab" role="tab">
                                <i class="fas fa-shield-alt me-2"></i>Security
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <!-- Profile Tab -->
                        <div class="tab-pane fade show active" id="profile-tab" role="tabpanel">
                            <h5 class="mb-4">Personal Information</h5>
                            <form action="{{ route('profile.update') }}" method="POST">
                                @csrf
                                @method('PATCH')

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

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">User Role</label>
                                        <input type="text" class="form-control" value="{{ ucfirst(Auth::user()->role) }}" readonly disabled>
                                        <small class="text-muted">Contact administrator to change role</small>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Account Created</label>
                                        <input type="text" class="form-control" value="{{ Auth::user()->created_at->format('F d, Y \\a\\t h:i A') }}" readonly disabled>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Last Profile Update</label>
                                        <input type="text" class="form-control" value="{{ Auth::user()->updated_at->format('F d, Y \\a\\t h:i A') }}" readonly disabled>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Email Verification Status</label>
                                        <input type="text" class="form-control" value="{{ Auth::user()->email_verified_at ? 'Verified on ' . Auth::user()->email_verified_at->format('M d, Y') : 'Not Verified' }}" readonly disabled>
                                    </div>
                                </div>

                                <div class="mt-4">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-2"></i>Update Profile
                                    </button>
                                    <button type="reset" class="btn btn-outline-secondary">
                                        <i class="fas fa-undo me-2"></i>Reset Changes
                                    </button>
                                </div>
                            </form>

                            <!-- Account Statistics -->
                            <div class="row mt-5">
                                <div class="col-12">
                                    <h5 class="mb-3">Account Statistics</h5>
                                    <div class="row">
                                        <div class="col-md-3 col-6 mb-3">
                                            <div class="card bg-light">
                                                <div class="card-body text-center">
                                                    <i class="fas fa-calendar-day fa-2x text-primary mb-2"></i>
                                                    <h4>{{ Auth::user()->created_at->diffInDays(now()) }}</h4>
                                                    <small class="text-muted">Days Active</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-6 mb-3">
                                            <div class="card bg-light">
                                                <div class="card-body text-center">
                                                    <i class="fas fa-user-check fa-2x text-success mb-2"></i>
                                                    <h4>{{ Auth::user()->email_verified_at ? 'Yes' : 'No' }}</h4>
                                                    <small class="text-muted">Email Verified</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-6 mb-3">
                                            <div class="card bg-light">
                                                <div class="card-body text-center">
                                                    <i class="fas fa-id-card fa-2x text-info mb-2"></i>
                                                    <h4>{{ Auth::user()->id }}</h4>
                                                    <small class="text-muted">User ID</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-6 mb-3">
                                            <div class="card bg-light">
                                                <div class="card-body text-center">
                                                    <i class="fas fa-shield-alt fa-2x text-warning mb-2"></i>
                                                    <h4>{{ ucfirst(Auth::user()->role) }}</h4>
                                                    <small class="text-muted">Role</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Security Tab -->
                        <div class="tab-pane fade" id="security-tab" role="tabpanel">
                            <h5 class="mb-4">Security Settings</h5>

                            <!-- Change Password -->
                            <div class="security-section mb-4">
                                <h6 class="text-muted mb-3">Change Password</h6>
                                <form action="{{ route('profile.password') }}" method="POST">
                                    @csrf
                                    @method('PATCH')

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

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">New Password <span class="text-danger">*</span></label>
                                            <input type="password" class="form-control @error('password') is-invalid @enderror" name="password" required>
                                            <small class="text-muted">Must be at least 8 characters long</small>
                                            @error('password')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Confirm New Password <span class="text-danger">*</span></label>
                                            <input type="password" class="form-control" name="password_confirmation" required>
                                        </div>
                                    </div>

                                    <div class="mt-3">
                                        <button type="submit" class="btn btn-warning">
                                            <i class="fas fa-key me-2"></i>Update Password
                                        </button>
                                    </div>
                                </form>
                            </div>

                            <!-- Security Information -->
                            <div class="security-section">
                                <h6 class="text-muted mb-3">Security Information</h6>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Last Password Change</label>
                                        <input type="text" class="form-control" value="{{ Auth::user()->updated_at->format('F d, Y \\a\\t h:i A') }}" readonly disabled>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Account Status</label>
                                        <input type="text" class="form-control" value="Active" readonly disabled>
                                    </div>
                                </div>

                                <div class="alert alert-info mt-3">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>Security Tips:</strong> Use a strong password with a mix of letters, numbers, and symbols. Never share your password with anyone.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.profile-card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
}

.profile-avatar-large {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #ffc107, #ffb300);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0 auto;
    border: 5px solid #f8f9fa;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.badge-role {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.profile-stats {
    border-top: 1px solid #f0f0f0;
    padding-top: 1rem;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #198754;
}

.stat-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
}

.nav-tabs .nav-link {
    border: none;
    color: #6c757d;
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    color: #198754;
    border-bottom: 2px solid #198754;
    background: transparent;
}

.security-section {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.security-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.list-group-item-action {
    transition: all 0.3s ease;
    border: none;
}

.list-group-item-action:hover,
.list-group-item-action.active {
    background: #f8f9fa;
    border-left: 3px solid #198754;
    padding-left: calc(1rem - 3px);
}

.card {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid #f0f0f0;
}

.table-sm td {
    padding: 0.25rem 0;
}

.bg-light .card-body {
    padding: 1.5rem 1rem;
}

.bg-light .card-body h4 {
    margin: 0.5rem 0;
    font-weight: 700;
}

@media (max-width: 768px) {
    .profile-avatar-large {
        width: 100px;
        height: 100px;
        font-size: 2rem;
    }

    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.85rem;
    }

    .stat-number {
        font-size: 1.25rem;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Tab switching functionality
    const tabLinks = document.querySelectorAll('[data-bs-toggle="tab"]');
    const listGroupItems = document.querySelectorAll('.list-group-item-action[data-bs-toggle="tab"]');

    tabLinks.forEach(link => {
        link.addEventListener('show.bs.tab', function(e) {
            // Update active state in sidebar
            listGroupItems.forEach(item => {
                item.classList.remove('active');
            });
            e.target.classList.add('active');
        });
    });

    // Form reset functionality
    const resetButtons = document.querySelectorAll('button[type="reset"]');
    resetButtons.forEach(button => {
        button.addEventListener('click', function() {
            const form = this.closest('form');
            form.reset();
        });
    });
});
</script>
@endsection