@extends('frontend.layouts.master')

@section('content')
    <div class="grid grid-cols-12 gap-6">
        <!-- Profile Menu -->
        <div class="col-span-12 lg:col-span-3 flex flex-col-reverse lg:flex-col animate__animated animate__fadeInLeft">
            <div class="bg-white rounded-xl shadow-md mt-5 p-5">
                <div class="flex items-center">
                    <div class="w-12 h-12">
                        <img class="rounded-full object-cover w-full h-full"
                            src="{{ asset('template/' . customer()?->avatar) ?? asset('images/avatar.png') }}" alt="Avatar">
                    </div>
                    <div class="ml-4">
                        <div class="font-semibold text-base text-gray-800">{{ customer()->firstname . ' ' . customer()->lastname }}
                        </div>
                    </div>
                </div>
                <div class="border-t border-gray-200 mt-5 pt-5 space-y-5">
                    <a class="flex items-center {{ request()->routeIs('user.information') ? 'text-primary font-semibold' : 'text-gray-700 hover:text-primary' }}"
                        href="{{ route('user.information') }}" wire:navigate>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="lucide lucide-activity-icon lucide-activity w-4 h-4 mr-2">
                            <path
                                d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" />
                        </svg>
                        Thông tin cá nhân
                    </a>

                    <a class="flex items-center {{ request()->routeIs('user.password') ? 'text-primary font-semibold' : 'text-gray-700 hover:text-primary' }}"
                        href="{{ route('user.password') }}" wire:navigate>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="lucide lucide-user-lock-icon lucide-user-lock w-4 h-4 mr-2">
                            <circle cx="10" cy="7" r="4" />
                            <path d="M10.3 15H7a4 4 0 0 0-4 4v2" />
                            <path d="M15 15.5V14a2 2 0 0 1 4 0v1.5" />
                            <rect width="8" height="5" x="13" y="16" rx=".899" />
                        </svg>
                        Đổi mật khẩu
                    </a>
                </div>
            </div>
        </div>

        @yield('section-account')

    </div>
@endsection