TeamFlash/sahara/main/templates/main/profile.html

{% extends 'base.html' %}
{% load static %}

{% block content %}
    <style>
        body {
            background-color: #f8f9fa;
        }
        .profile-header {
            background-color: #007bff;
            color: white;
            padding: 20px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .profile-header .left {
            display: flex;
            align-items: center;
        }
        .profile-header img {
            border-radius: 50%;
            width: 100px;
            height: 100px;
            margin-right: 20px;
        }
        .profile-details {
            margin-bottom: 20px;
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .status-badge {
            padding: 5px 10px;
            border-radius: 5px;
            color: white;
        }
        .status-active {
            background-color: #28a745;
        }
        .status-complete {
            background-color: #17a2b8;
        }
    </style>

    <div class="container mt-4">
        <!-- Profile Header -->
        <div class="profile-header">
            <div class="left">
                {% if user.profile and user.profile.url %}
                    <img src="{{ user.profile.url }}" alt="Profile Picture">
                {% else %}
                    <img src="{% static 'img/dummypic.png' %}" alt="Profile Picture">
                {% endif %}

                <div>
                    <h2>{{ user.first_name|capfirst }} {{ user.last_name|capfirst }}</h2>
                    <p>Customer ID: {{ user.id }}</p>
                </div>
            </div>
            <div>
                <p>Member Since: {{ user.member_since|date:"b - Y" }}</p>
                <p>Status: Active</p>
            </div>
        </div>

        <!-- Profile Details -->
        <div class="profile-details">
            <div class="row">
                <div class="col-md-12">
                    <div class="card p-6">
                        <h5>Contact Information</h5>
                        <p>Email: {{ user.email }}</p>
                        <p>Phone: (+977) {{ user.phone_number }}</p>
                        <p>Address: {{ user.address }}</p>
                    </div>
                </div>
            </div>
        </div>

        {% if request.user == user %}
        <!-- Pending/Active Requests -->
        <div class="recent-activities">
            <h4 class="mb-3">Pending/Active Requests</h4>
            <div class="card p-3">
                <ul class="list-group list-group-flush">
                    {% for req in pending_requests %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        {{ req.service_offered }} request from {{ req.client.first_name|capfirst }} {{ req.client.last_name|capfirst }} for Rs {{req.agreed_price}} , Time:- {{req.service_hour}} hrs
                        <a class="btn btn-success status-badge status-active" href={% url 'approve' req.id %}>Accept</a>
                    </li>
                    {% empty %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Hurray! There are no Pending Requests till now.
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% endif %}
        <!-- Completed Services -->
        <div class="recent-activities mt-4">
            <h4 class="my-3">Completed/Active Requests</h4>
            <div class="card p-3">
                <ul class="list-group list-group-flush">
                    {% for service in current %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        {{ service.service_offered }} request from {{ service.client.first_name|capfirst }} {{ service.client.last_name|capfirst }} for Rs{{service.agreed_price}} , Time:- {{service.service_hour}} hrs
                        <a class="status-badge status-complete" href="{% url 'complete' service.id %}">Complete</a>
                    </li>
                    {% empty %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        There are no active tasks right now.
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
{% endblock %}