{% extends 'theme/dashborad_base.html' %}
{% block page_title %}My Account{% endblock %}
{% block page_subtitle %}Manage your profile information{% endblock %}

{% block dashboard_content %}
<div class="max-w-4xl">
    <div class="bg-white rounded-2xl shadow-sm border border-secondary/10 overflow-hidden">
        <div class="relative h-20">
            <div class="absolute inset-0 opacity-10">
                <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                    <defs>
                        <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
                            <path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5"/>
                        </pattern>
                    </defs>
                    <rect width="100" height="100" fill="url(#grid)"/>
                </svg>
            </div>
        </div>
        
        <div class="relative px-6 lg:px-8 pb-8">
            <div class="flex flex-col sm:flex-row sm:items-end gap-4 -mt-12">
                <div class="w-24 h-24 bg-primary rounded-2xl flex items-center justify-center shadow-xl border-4 border-white">
                    <span class="text-3xl font-bold font-poppins text-white">{{ user.first_name.0 }}{{ user.last_name.0 }}</span>
                </div>
                <div class="flex-1 sm:pb-2">
                    <h2 class="text-2xl font-bold font-poppins text-primary-dark">{{ user.get_full_name }}</h2>
                    <p class="text-secondary font-poppins">{{ user.email }}</p>
                </div>
                <div class="sm:pb-2">
                    {% if profile %}
                    <span class="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium font-poppins">
                        {% if profile.is_business %}
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                        </svg>
                        Business Account
                        {% else %}
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                        Personal Account
                        {% endif %}
                    </span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
        <div class="bg-white rounded-2xl shadow-sm border border-secondary/10 p-6">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center">
                    <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                </div>
                <h3 class="text-lg font-semibold font-poppins text-primary-dark">Personal Information</h3>
            </div>
            
            <div class="space-y-4">
                <div class="flex items-center justify-between py-3 border-b border-secondary/10">
                    <span class="text-secondary font-poppins text-sm">First Name</span>
                    <span class="text-primary-dark font-medium font-poppins">{{ user.first_name|default:"-" }}</span>
                </div>
                <div class="flex items-center justify-between py-3 border-b border-secondary/10">
                    <span class="text-secondary font-poppins text-sm">Last Name</span>
                    <span class="text-primary-dark font-medium font-poppins">{{ user.last_name|default:"-" }}</span>
                </div>
                <div class="flex items-center justify-between py-3 border-b border-secondary/10">
                    <span class="text-secondary font-poppins text-sm">Email</span>
                    <span class="text-primary-dark font-medium font-poppins">{{ user.email }}</span>
                </div>
                <div class="flex items-center justify-between py-3">
                    <span class="text-secondary font-poppins text-sm">Member Since</span>
                    <span class="text-primary-dark font-medium font-poppins">{{ user.date_joined|date:"M d, Y" }}</span>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-secondary/10 p-6">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center">
                    <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold font-poppins text-primary-dark">Contact Information</h3>
            </div>
            
            <div class="space-y-4">
                {% if profile %}
                <div class="flex items-center justify-between py-3 border-b border-secondary/10">
                    <span class="text-secondary font-poppins text-sm">Phone</span>
                    <span class="text-primary-dark font-medium font-poppins">{{ profile.phone_number|default:"-" }}</span>
                </div>
                {% if profile.job_title %}
                <div class="flex items-center justify-between py-3 border-b border-secondary/10">
                    <span class="text-secondary font-poppins text-sm">Job Title</span>
                    <span class="text-primary-dark font-medium font-poppins">{{ profile.job_title }}</span>
                </div>
                {% endif %}
                <div class="flex items-center justify-between py-3 border-b border-secondary/10">
                    <span class="text-secondary font-poppins text-sm">City</span>
                    <span class="text-primary-dark font-medium font-poppins">{{ profile.city|default:"-" }}</span>
                </div>
                <div class="flex items-center justify-between py-3">
                    <span class="text-secondary font-poppins text-sm">Country</span>
                    <span class="text-primary-dark font-medium font-poppins">{{ profile.country|default:"-" }}</span>
                </div>
                {% else %}
                <p class="text-secondary font-poppins text-sm py-3">No contact information available</p>
                {% endif %}
            </div>
        </div>

        {% if profile.is_business %}
        <div class="bg-white rounded-2xl shadow-sm border border-secondary/10 p-6 lg:col-span-2">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center">
                    <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold font-poppins text-primary-dark">Business Information</h3>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4">
                <div class="flex items-center justify-between py-3 border-b border-secondary/10">
                    <span class="text-secondary font-poppins text-sm">Company Name</span>
                    <span class="text-primary-dark font-medium font-poppins">{{ profile.company_name|default:"-" }}</span>
                </div>
                <div class="flex items-center justify-between py-3 border-b border-secondary/10">
                    <span class="text-secondary font-poppins text-sm">Legal Name</span>
                    <span class="text-primary-dark font-medium font-poppins">{{ profile.company_legal_name|default:"-" }}</span>
                </div>
                <div class="flex items-center justify-between py-3 border-b border-secondary/10">
                    <span class="text-secondary font-poppins text-sm">Company Email</span>
                    <span class="text-primary-dark font-medium font-poppins">{{ profile.company_email|default:"-" }}</span>
                </div>
                <div class="flex items-center justify-between py-3 border-b border-secondary/10">
                    <span class="text-secondary font-poppins text-sm">VAT/Tax Number</span>
                    <span class="text-primary-dark font-medium font-poppins">{{ profile.vat_tax_number|default:"-" }}</span>
                </div>
            </div>
        </div>
        {% endif %}

        {% if profile %}

        <div class="bg-white rounded-2xl shadow-sm border border-secondary/10 p-6 lg:col-span-2">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center">
                    <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold font-poppins text-primary-dark">Address</h3>
            </div>
            
            <div class="bg-accent rounded-xl p-4">
                <p class="text-primary-dark font-poppins">
                    {{ profile.street_address }}<br>
                    {{ profile.city }}{% if profile.state_province %}, {{ profile.state_province }}{% endif %} {{ profile.zip_code }}<br>
                    {{ profile.country }}
                </p>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}