@extends('layout')

@section('header')
    {{-- Assuming this page might use a different header, 
    or just a plain header like below. --}}
    @include('components.header-inner', [
        'title' => 'Profile',
    ])
@endsection

@section('content')
    <style>
        /* 🎨 Main Container */
        .profile-container {
            margin: 0 auto;
            padding: 20px 16px;
            box-sizing: border-box;
        }

        /* 👤 User Info Section */
        .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
            /* Subtle separator */
        }

        .avatar-wrapper {
            position: relative;
            margin-right: 15px;
        }

        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            /* Placeholder background for the avatar image */
            background: #f0f0f0;
            border: 1px solid #ddd;
        }

        .camera-icon {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 24px;
            height: 24px;
            background: #fff;
            border: 2px solid #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .camera-icon svg {
            color: #4CAF50;
            /* Green color for the camera icon */
            width: 14px;
            height: 14px;
        }

        .user-details h2 {
            font-size: 18px;
            font-weight: 700;
            color: #222;
            margin: 0 0 4px 0;
        }

        .user-details p {
            font-size: 14px;
            color: #666;
            margin: 0;
        }

        /* 📋 Menu List */
        .menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .menu-item {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #f5f5f5;
            /* Light separator for menu items */
            cursor: pointer;
            transition: background-color 0.1s;
        }

        .menu-item:hover {
            background-color: #fcfcfc;
        }

        .menu-item:last-child {
            border-bottom: none;
            margin-top: 10px;
            /* Separator for the logout button */
        }

        .menu-item-icon {
            width: 24px;
            height: 24px;
            margin-right: 15px;
            color: #555;
            /* Default icon color */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .menu-item-text {
            font-size: 16px;
            font-weight: 500;
            color: #222;
            /* Default text color */
        }

        /* 🚪 Logout Styling (Red text and icon) */
        .menu-item.logout .menu-item-icon,
        .menu-item.logout .menu-item-text {
            color: #FF4136;
            /* Red color for logout */
        }

        /* 📱 Mobile Responsiveness */
        @media (max-width: 480px) {
            .profile-container {
                padding: 15px 10px;
            }

            .user-info {
                padding-bottom: 15px;
            }

            .avatar {
                width: 70px;
                height: 70px;
            }

            .user-details h2 {
                font-size: 17px;
            }

            .menu-item {
                padding: 12px 0;
            }
        }
    </style>

    <div class="profile-container mt-4">

        <div class="user-info">
            <div class="avatar-wrapper">
                <img class="avatar" src="https://i.imgur.com/your-image-url.jpg" alt="User Avatar">
                <div class="camera-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path
                            d="M20 5h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-8 13c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z" />
                    </svg>
                </div>
            </div>
            <div class="user-details">
                <h2>Jane Cooper !!</h2>
                <p>+91 9876543211</p>
            </div>
        </div>

        <ul class="menu-list">

            <li class="menu-item" onclick="window.location.href='/cart'">
                <span class="menu-item-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M2 2H3.74001C4.82001 2 5.67 2.93 5.58 4L4.75 13.96C4.61 15.59 5.89999 16.99 7.53999 16.99H18.19C19.63 16.99 20.89 15.81 21 14.38L21.54 6.88C21.66 5.22 20.4 3.87 18.73 3.87H5.82001"
                            stroke="#404040" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path
                            d="M16.25 22C16.9404 22 17.5 21.4404 17.5 20.75C17.5 20.0596 16.9404 19.5 16.25 19.5C15.5596 19.5 15 20.0596 15 20.75C15 21.4404 15.5596 22 16.25 22Z"
                            stroke="#404040" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path
                            d="M8.25 22C8.94036 22 9.5 21.4404 9.5 20.75C9.5 20.0596 8.94036 19.5 8.25 19.5C7.55964 19.5 7 20.0596 7 20.75C7 21.4404 7.55964 22 8.25 22Z"
                            stroke="#404040" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M9 8H21" stroke="#404040" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>

                </span>
                <span class="menu-item-text">Cart</span>
            </li>

            <li class="menu-item" onclick="window.location.href='/history'">
                <span class="menu-item-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M14.55 21.67C18.84 20.54 22 16.64 22 12C22 6.48 17.56 2 12 2C5.33 2 2 7.56 2 7.56M2 7.56V3M2 7.56H4.01H6.44"
                            stroke="#404040" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M2 12C2 17.52 6.48 22 12 22" stroke="#404040" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round" stroke-dasharray="3 3" />
                    </svg>
                </span>
                <span class="menu-item-text">History</span>
            </li>

            <li class="menu-item logout" onclick="handleLogout()">
                <span class="menu-item-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M15.1001 16.4398C14.7901 20.0398 12.9401 21.5098 8.8901 21.5098L8.7601 21.5098C4.2901 21.5098 2.5001 19.7198 2.5001 15.2498L2.5001 8.72977C2.5001 4.25977 4.2901 2.46977 8.7601 2.46977L8.8901 2.46977C12.9101 2.46977 14.7601 3.91977 15.0901 7.45977"
                            stroke="#FF5F57" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M8.99988 12L20.3799 12" stroke="#FF5F57" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M18.15 15.3496L21.5 11.9996L18.15 8.64961" stroke="#FF5F57" stroke-width="1.5"
                            stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </span>
                <span class="menu-item-text">Logout</span>
            </li>
        </ul>

    </div>

    <script>
        // Dummy function for handling logout
        function handleLogout() {
            if (confirm("Are you sure you want to log out?")) {
                // In a real application, this would call your backend logout endpoint
                console.log("Logging out...");
                window.location.href = '/login'; // Redirect to login page
            }
        }
    </script>
@endsection