@extends('layouts.app')

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

@section('content')
<div class="profile-container">
    <div class="profile-header">
        <h1>My Profile</h1>
        <p>Manage your account information</p>
    </div>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-error">
            @foreach($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif

    <div class="profile-grid">
        <!-- Profile Information -->
        <div class="profile-card">
            <div class="card-header">
                <h3>Profile Information</h3>
            </div>
            <form method="POST" action="{{ route('profile.update') }}" class="profile-form">
                @csrf
                @method('PUT')

                <div class="form-group">
                    <label>Full Name</label>
                    <input type="text" name="name" value="{{ old('name', $user->name) }}" required>
                </div>

                <div class="form-group">
                    <label>Email Address</label>
                    <input type="email" name="email" value="{{ old('email', $user->email) }}" required>
                </div>

                <div class="form-group">
                    <label>Phone Number</label>
                    <input type="tel" name="phone" value="{{ old('phone', $user->phone) }}" placeholder="+62 812 3456 7890">
                </div>

                <div class="form-group">
                    <label>Address</label>
                    <textarea name="address" rows="3" placeholder="Your address">{{ old('address', $user->address) }}</textarea>
                </div>

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

        <!-- Change Password -->
        <div class="profile-card">
            <div class="card-header">
                <h3>Change Password</h3>
            </div>
            <form method="POST" action="{{ route('profile.password') }}" class="profile-form">
                @csrf
                @method('PUT')

                <div class="form-group">
                    <label>Current Password</label>
                    <input type="password" name="current_password" required>
                </div>

                <div class="form-group">
                    <label>New Password</label>
                    <input type="password" name="password" required>
                    <small>Minimum 8 characters</small>
                </div>

                <div class="form-group">
                    <label>Confirm New Password</label>
                    <input type="password" name="password_confirmation" required>
                </div>

                <button type="submit" class="btn-save">Update Password</button>
            </form>
        </div>

        <!-- Account Information -->
        <div class="profile-card info-card">
            <div class="card-header">
                <h3>Account Information</h3>
            </div>
            <div class="info-list">
                <div class="info-row">
                    <span class="info-label">Member Since</span>
                    <span class="info-value">{{ $user->created_at->format('d F Y') }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Last Login</span>
                    <span class="info-value">{{ $user->last_login_at ? $user->last_login_at->diffForHumans() : 'First time login' }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Account Status</span>
                    <span class="info-value">
                        <span class="badge-active">Active</span>
                    </span>
                </div>
                <div class="info-row">
                    <span class="info-label">Role</span>
                    <span class="info-value">
                        <span class="badge-role">{{ ucfirst($user->role) }}</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.profile-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

.profile-header {
    margin-bottom: 2rem;
}

.profile-header h1 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.profile-header p {
    color: #6b7280;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.profile-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
}

.info-card {
    grid-column: span 2;
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.profile-form {
    padding: 1.5rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #374151;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
}

.form-group small {
    display: block;
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.btn-save {
    background: #dc2626;
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

.info-list {
    padding: 1rem 1.5rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 0.875rem;
    color: #6b7280;
}

.info-value {
    font-weight: 500;
    font-size: 0.875rem;
}

.badge-active {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #d1fae5;
    color: #065f46;
    border-radius: 20px;
    font-size: 0.7rem;
}

.badge-role {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 20px;
    font-size: 0.7rem;
    text-transform: capitalize;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

@media (max-width: 768px) {
    .profile-container {
        padding: 1rem;
    }
    
    .profile-grid {
        grid-template-columns: 1fr;
    }
    
    .info-card {
        grid-column: span 1;
    }
}
</style>
@endsection