<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile - Task Panel</title>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #3b46f1;
            --primary-hover: #2a35d8;
            --primary-light: #eff6ff;
            --bg-main: #f8fafc;
            --bg-card: #ffffff;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --text-label: #334155;
            --border-color: #e2e8f0;
            --border-hover: #cbd5e1;
            --font-family: 'Instrument Sans', sans-serif;
            --color-completed: #10b981;
            --color-completed-light: #ecfdf5;
            --color-hold: #ef4444;
            --color-hold-light: #fef2f2;
            --sidebar-width: 260px;
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
            --border-radius: 12px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: var(--font-family);
            background-color: var(--bg-main);
            color: var(--text-main);
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        .dashboard-layout { display: flex; position: relative; min-height: 100vh; }

        /* ── Main Content ── */
        .main-content {
            margin-left: var(--sidebar-width); flex-grow: 1;
            padding: 2rem; display: flex; flex-direction: column;
            gap: 2rem; min-width: 0; transition: margin-left 0.3s ease;
        }

        /* ── Topbar ── */
        .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
        .topbar-left { display: flex; align-items: center; gap: 0.75rem; }

        .menu-toggle-btn {
            display: none; background: var(--bg-card);
            border: 1px solid var(--border-color);
            width: 40px; height: 40px; border-radius: 8px;
            align-items: center; justify-content: center;
            cursor: pointer; color: var(--text-label); transition: all 0.2s;
        }
        .menu-toggle-btn svg { width: 1.25rem; height: 1.25rem; }
        .topbar-right { display: flex; align-items: center; gap: 1rem; margin-left: auto; }

        .user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

        .avatar-frame {
            width: 36px; height: 36px; border-radius: 50%;
            position: relative; overflow: hidden;
            background: linear-gradient(135deg, #4f46e5, #3b82f6);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-weight: 700; font-size: 0.875rem;
        }
        .avatar-img { width: 100%; height: 100%; object-fit: cover; }
        /* .online-dot {
            width: 10px; height: 10px; background-color: #10b981;
            border: 2px solid var(--bg-card); border-radius: 50%;
            position: absolute; bottom: 0; right: 0;
        } */
        .user-info { display: flex; flex-direction: column; line-height: 1.2; }
        .user-fullname { font-size: 0.875rem; font-weight: 700; color: var(--text-main); }
        .user-role-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }
        .dashboard-title { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-main); }

        /* ── Profile Layout ── */
        .profile-container {
            display: grid; grid-template-columns: 1fr;
            max-width: 850px; margin: 0 auto; width: 100%;
            gap: 2rem; animation: slideUp 0.6s cubic-bezier(0.16,1,0.3,1);
        }

        .profile-forms-column { display: flex; flex-direction: column; gap: 2rem; }

        /* ── Cards ── */
        .card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 2rem; box-shadow: var(--shadow-sm); transition: all 0.3s ease;
        }
        .card:hover { border-color: var(--border-hover); }

        .card-header-title {
            font-size: 1.125rem; font-weight: 800; color: var(--text-main);
            margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem;
        }
        .card-header-title svg { width: 1.25rem; height: 1.25rem; color: var(--primary-color); }

        /* ── Form ── */
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; margin-bottom: 1.5rem; }
        .form-group { display: flex; flex-direction: column; gap: 0.5rem; }
        .form-label { font-size: 0.875rem; font-weight: 700; color: var(--text-label); }
        .input-wrapper { position: relative; border-radius: 8px; }

        .input-field {
            display: block; width: 100%; padding: 0.75rem 1rem;
            border: 1px solid var(--border-color); border-radius: 8px;
            color: var(--text-main); background-color: #fff;
            font-size: 0.875rem; font-family: inherit; transition: all 0.2s ease;
        }
        .input-field.has-eye { padding-right: 2.75rem; }
        .input-field:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(59,70,241,0.15); }
        .input-field:disabled { background-color: #f1f5f9; color: var(--text-muted); cursor: not-allowed; }

        /* ── Eye Toggle ── */
        .eye-toggle-btn {
            position: absolute; right: 0.75rem; top: 50%;
            transform: translateY(-50%); border: none; background: none;
            color: var(--text-muted); cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            padding: 0.25rem; border-radius: 4px; transition: color 0.2s ease;
        }
        .eye-toggle-btn:hover { color: var(--text-label); }
        .eye-toggle-btn svg { width: 1.125rem; height: 1.125rem; stroke-width: 2; }

        .btn-submit {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 0.75rem 1.5rem; border-radius: 8px;
            font-size: 0.875rem; font-weight: 700; cursor: pointer;
            transition: all 0.2s ease; border: 1px solid transparent;
            background-color: var(--primary-color); color: #fff;
            box-shadow: 0 4px 6px -1px rgba(59,70,241,0.1); font-family: inherit;
        }
        .btn-submit:hover { background-color: var(--primary-hover); box-shadow: 0 10px 15px -3px rgba(59,70,241,0.2); }

        /* ── Alerts ── */
        .alert-success {
            background-color: var(--color-completed-light);
            border-left: 4px solid var(--color-completed);
            padding: 1rem; border-radius: 8px; box-shadow: var(--shadow-sm);
            display: flex; align-items: center;
            font-size: 0.875rem; font-weight: 600; color: #065f46;
            animation: fadeIn 0.4s ease-out;
        }
        .alert-success svg { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; color: var(--color-completed); }

        .alert-error {
            background-color: var(--color-hold-light);
            border-left: 4px solid var(--color-hold);
            padding: 1rem; border-radius: 8px; box-shadow: var(--shadow-sm);
            display: flex; flex-direction: column; gap: 0.25rem;
            font-size: 0.875rem; font-weight: 600; color: #991b1b;
        }
        .alert-error ul { list-style: inside disc; padding-left: 0.5rem; font-weight: 500; font-size: 0.8rem; margin-top: 0.25rem; }

        /* ── Animations ── */
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

        /* ── Responsive ── */
        @media (max-width: 1024px) {
            .main-content { margin-left: 0; padding: 1.5rem; }
            .menu-toggle-btn { display: flex; }
        }

        @media (max-width: 640px) {
            .form-grid { grid-template-columns: 1fr; }
            .btn-submit { width: 100%; }
        }
    </style>
</head>
<body>

    <div class="dashboard-layout">
        
        <?php echo $__env->make('user.sidebar.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

        <!-- RIGHT MAIN CONTENT AREA -->
        <main class="main-content">

            <?php echo $__env->make('user.sidebar.topbar', ['pageTitle' => 'My Profile'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

            <!-- Alerts -->
            <?php if(session('success')): ?>
                <div class="alert-success">
                    <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span><?php echo e(session('success')); ?></span>
                </div>
            <?php endif; ?>

            <?php if($errors->any()): ?>
                <div class="alert-error">
                    <strong>Please resolve the following errors:</strong>
                    <ul>
                        <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li><?php echo e($error); ?></li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </div>
            <?php endif; ?>

            <!-- Profile — single column, centered, max 850px -->
            <div class="profile-container">
                <div class="profile-forms-column">

                    <!-- Card 1: Account Settings -->
                    <div class="card">
                        <h3 class="card-header-title">
                            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                            Account Settings
                        </h3>

                        <form method="POST" action="<?php echo e(route('user.profile.update')); ?>">
                            <?php echo csrf_field(); ?>
                            <div class="form-grid">

                                <div class="form-group">
                                    <label for="name" class="form-label">Full Name</label>
                                    <div class="input-wrapper">
                                        <input type="text" name="name" id="name"
                                            value="<?php echo e(old('name', $user->name)); ?>"
                                            class="input-field" required>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="email" class="form-label">Email Address</label>
                                    <div class="input-wrapper">
                                        <input type="email" name="email" id="email"
                                            value="<?php echo e(old('email', $user->email)); ?>"
                                            class="input-field" required>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Role</label>
                                    <div class="input-wrapper">
                                        <input type="text" class="input-field" value="<?php echo e($user->role); ?>" disabled>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Status</label>
                                    <div class="input-wrapper">
                                        <input type="text" class="input-field" value="<?php echo e($user->status); ?>" disabled>
                                    </div>
                                </div>

                            </div>
                            <div style="display: flex; justify-content: flex-end;">
                                <button type="submit" class="btn-submit">Save Account Changes</button>
                            </div>
                        </form>
                    </div>

                    <!-- Card 2: Password Settings -->
                    <div class="card">
                        <h3 class="card-header-title">
                            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                            </svg>
                            Password Settings
                        </h3>

                        <form method="POST" action="<?php echo e(route('user.change-password.update')); ?>">
                            <?php echo csrf_field(); ?>
                            <div class="form-grid">

                                <div class="form-group">
                                    <label for="current_password" class="form-label">Current Password</label>
                                    <div class="input-wrapper">
                                        <input type="password" name="current_password" id="current_password"
                                            class="input-field has-eye" required>
                                        <button type="button" class="eye-toggle-btn" onclick="togglePass('current_password')" aria-label="Toggle">
                                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="password" class="form-label">New Password</label>
                                    <div class="input-wrapper">
                                        <input type="password" name="password" id="password"
                                            class="input-field has-eye" required>
                                        <button type="button" class="eye-toggle-btn" onclick="togglePass('password')" aria-label="Toggle">
                                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="password_confirmation" class="form-label">Confirm New Password</label>
                                    <div class="input-wrapper">
                                        <input type="password" name="password_confirmation" id="password_confirmation"
                                            class="input-field has-eye" required>
                                        <button type="button" class="eye-toggle-btn" onclick="togglePass('password_confirmation')" aria-label="Toggle">
                                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>

                            </div>
                            <div style="display: flex; justify-content: flex-end;">
                                <button type="submit" class="btn-submit">Update Password</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>

        </main>
    </div>

    <script>
        function togglePass(id) {
            const f = document.getElementById(id);
            f.type = f.type === 'password' ? 'text' : 'password';
        }

        document.addEventListener('DOMContentLoaded', function() {
            const successAlert = document.querySelector('.alert-success');
            if (successAlert) {
                setTimeout(() => {
                    successAlert.style.transition = 'opacity 0.5s ease';
                    successAlert.style.opacity = '0';
                    setTimeout(() => successAlert.remove(), 500);
                }, 3000);
            }
        });
    </script>
</body>
</html>
<?php /**PATH /home/sainikcanteen/public_html/task/resources/views/user/profile/profile.blade.php ENDPATH**/ ?>