{% extends 'base.html' %}
{% load static %}
{% load humanize %}
{% block title %}Hariri Profaili - {{ member.full_name }}{% endblock %}

{% block content %}
<style>
    .profile-container {
        max-width: 800px;
        margin: 2rem auto;
        padding: 0 1rem;
    }
    
    .profile-card {
        background: var(--white);
        border-radius: 1.5rem;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .profile-header {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        color: var(--white);
        padding: 2rem;
        text-align: center;
    }
    
    .profile-header h2 {
        margin-bottom: 0.5rem;
    }
    
    .profile-body {
        padding: 2rem;
    }
    
    .form-section {
        margin-bottom: 2rem;
        border-bottom: 1px solid var(--light-gray);
        padding-bottom: 1.5rem;
    }
    
    .form-section h3 {
        color: var(--primary);
        font-size: 1.1rem;
        margin-bottom: 1.2rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .form-row {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }
    
    .form-group {
        flex: 1;
        min-width: 200px;
        margin-bottom: 1rem;
    }
    
    .form-group label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--secondary);
        font-size: 0.85rem;
    }
    
    .form-group input, 
    .form-group select, 
    .form-group textarea {
        width: 100%;
        padding: 0.7rem 1rem;
        border: 2px solid var(--light-gray);
        border-radius: 0.75rem;
        font-size: 0.9rem;
        font-family: 'Poppins', sans-serif;
    }
    
    .form-group input:focus, 
    .form-group select:focus, 
    .form-group textarea:focus {
        outline: none;
        border-color: var(--primary);
    }
    
    .btn-save {
        width: 100%;
        background: var(--primary);
        color: var(--white);
        padding: 0.8rem;
        font-weight: 700;
        border-radius: 0.75rem;
        border: none;
        cursor: pointer;
        font-size: 1rem;
    }
    
    .btn-save:hover {
        background: var(--primary-dark);
    }
    
    .btn-cancel {
        width: 100%;
        background: var(--gray);
        color: var(--white);
        padding: 0.8rem;
        font-weight: 700;
        border-radius: 0.75rem;
        text-align: center;
        display: block;
        text-decoration: none;
        margin-top: 0.5rem;
    }
    
    @media (max-width: 768px) {
        .profile-body {
            padding: 1rem;
        }
        
        .form-row {
            flex-direction: column;
            gap: 0;
        }
    }
</style>

<div class="profile-container">
    <div class="profile-card">
        <div class="profile-header">
            <h2><i class="fas fa-user-edit"></i> Hariri Profaili Yako</h2>
            <p>{{ member.full_name }} - {{ group.name }}</p>
            <small><i class="fas fa-lock"></i> Taarifa zako zitalindwa kwa mujibu wa sheria za faragha</small>
        </div>
        
        <div class="profile-body">
            <form method="POST">
                {% csrf_token %}
                
                <div class="form-section">
                    <h3><i class="fas fa-user"></i> Taarifa za Msingi</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label>Jinsia</label>
                            {{ form.gender }}
                        </div>
                        <div class="form-group">
                            <label>Tarehe ya kuzaliwa</label>
                            {{ form.date_of_birth }}
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label>Hali ya ndoa</label>
                            {{ form.marital_status }}
                        </div>
                        <div class="form-group">
                            <label>Idadi ya watoto</label>
                            {{ form.number_of_children }}
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h3><i class="fas fa-phone-alt"></i> Mawasiliano</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label>Namba ya dharura</label>
                            {{ form.emergency_phone }}
                            <small style="display: block; color: var(--gray);">Lazima iwe namba ya mtu wa kuwasiliana naye wakati wa dharura</small>
                        </div>
                        <div class="form-group">
                            <label>Namba ya mwenzi</label>
                            {{ form.spouse_phone }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Barua pepe</label>
                        {{ form.email }}
                    </div>
                    <div class="form-group">
                        <label>Anuani ya makazi</label>
                        {{ form.physical_address }}
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label>Mkoa</label>
                            {{ form.region }}
                        </div>
                        <div class="form-group">
                            <label>Wilaya</label>
                            {{ form.district }}
                        </div>
                        <div class="form-group">
                            <label>Kata</label>
                            {{ form.ward }}
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h3><i class="fas fa-graduation-cap"></i> Elimu na Ujuzi</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label>Kiwango cha elimu</label>
                            {{ form.education_level }}
                        </div>
                        <div class="form-group">
                            <label>Taaluma / Kazi yako</label>
                            {{ form.profession }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Mahali pa kazi</label>
                        {{ form.place_of_work }}
                    </div>
                    <div class="form-group">
                        <label>Ujuzi wako</label>
                        {{ form.skills }}
                        <small>Tenganisha kwa comma (k.m. Sheria, Uhasibu, Ufundi)</small>
                    </div>
                    <div class="form-group">
                        <label>Unaweza kusaidia wanachama wenzako kwa namna gani?</label>
                        {{ form.can_help_with }}
                    </div>
                </div>
                
                <div class="form-section">
                    <h3><i class="fas fa-store"></i> Taarifa za Biashara</h3>
                    <div class="form-group">
                        <label>Jina la biashara</label>
                        {{ form.business_name }}
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label>Aina ya biashara</label>
                            {{ form.business_type }}
                        </div>
                        <div class="form-group">
                            <label>Mahali pa biashara</label>
                            {{ form.business_location }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Bidhaa au huduma unazozitoa</label>
                        {{ form.business_products }}
                    </div>
                </div>
                
                <div class="form-section">
                    <h3><i class="fas fa-heart"></i> Mambo Mengine</h3>
                    <div class="form-group">
                        <label>Mambo unayopenda kufanya</label>
                        {{ form.hobbies }}
                    </div>
                    <div class="form-group">
                        <label>Maelezo mafupi kukuhusu</label>
                        {{ form.bio }}
                    </div>
                </div>
                
                <div class="form-section">
                    <h3><i class="fas fa-shield-alt"></i> Ufaragha - Nani Aone Taarifa Zako?</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label>Namba yangu ionekane kwa</label>
                            {{ form.phone_privacy }}
                        </div>
                        <div class="form-group">
                            <label>Anuani yangu ionekane kwa</label>
                            {{ form.address_privacy }}
                        </div>
                        <div class="form-group">
                            <label>Taarifa za biashara zionekane kwa</label>
                            {{ form.business_privacy }}
                        </div>
                    </div>
                </div>
                
                <button type="submit" class="btn-save">
                    <i class="fas fa-save"></i> Hifadhi Profaili
                </button>
            </form>
            
            <a href="{% url 'member_profile_view' group.id member.id %}" class="btn-cancel">
                <i class="fas fa-times"></i> Rudi kwenye Profaili
            </a>
        </div>
    </div>
</div>
{% endblock %}