{% extends "client/base_site.html" %}
{% load i18n static %}
{% block title %}Profile - Dashboard{% endblock %}

{% block topbar %}
    {% include "client/topbar.html" %}
{% endblock %}

{% block content %}
    <div class="page-content">
        <div class="page-container">
            {% block breadcrumbs %}
                {% include "client/breadcrumbs.html" with title="Profile" %}
            {% endblock %}

            {% if client %}
            <div class="card shadow-sm">
                <div class="card-header card-tabs d-flex align-items-center bg-primary text-white">
                    <div class="flex-grow-1"><h4 class="header-title">Personal Information</h4></div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-9">
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <strong>Client Number:</strong><br>
                                    {{ client.client_number }}
                                </div>
                                <div class="col-md-3">
                                    <strong>Full Name:</strong><br>
                                    {{ client.firstname }} {{ client.lastname }} {{ client.othername|default:"" }}
                                </div>
                                <div class="col-md-3">
                                    <strong>Gender:</strong><br>
                                    {{ client.gender }}
                                </div>
                                <div class="col-md-3">
                                    <strong>Date of Birth:</strong><br>
                                    {{ client.date_of_birth }}
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <strong>Nationality:</strong><br>
                                    {{ client.nationality }}
                                </div>
                                <div class="col-md-3">
                                    <strong>Country of Residence:</strong><br>
                                    {{ client.country_of_residence }}
                                </div>
                                <div class="col-md-3">
                                    <strong>ID Type:</strong><br>
                                    {{ client.id_type }}
                                </div>
                                <div class="col-md-3">
                                    <strong>ID Number:</strong><br>
                                    {{ client.id_number }}
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <strong>Primary Phone:</strong><br>
                                    {{ client.telephone1 }}
                                </div>
                                <div class="col-md-3">
                                    <strong>Secondary Phone:</strong><br>
                                    {{ client.telephone2|default:"—" }}
                                </div>
                                <div class="col-md-3">
                                    <strong>Email:</strong><br>
                                    {{ client.email|default:"—" }}
                                </div>
                                <div class="col-md-3">
                                    <strong>Address:</strong><br>
                                    {{ client.address }}
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <strong>Date Joined:</strong><br>
                                    {{ client.created_at }}
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            {% if client.photo %}
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <img src="{{ client.photo.url }}" alt="Client Photo" class="img-thumbnail" style="max-width: 200px;">
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    
                </div>
            </div>
            {% else %}
            <div class="alert alert-warning">
                No client information found for this user.
            </div>
            {% endif %}


            {% if next_of_keens %}
                <div class="card shadow-sm">
                    <div class="card-header card-tabs d-flex align-items-center bg-succes text-whit">
                    <div class="flex-grow-1"><h4 class="header-title">Next of keen</h4></div>
                </div>
                    <div class="card-body">
                        <div class="table-responsive-sm">
                            <table class="table table-striped mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <td><strong>Full Name:</strong></td>
                                        <td><strong>Client Number:</strong></td>
                                        <td><strong>Gender:</strong></td>
                                        <td><strong>Date of Birth:</strong></td>
                                        <td><strong>Nationality:</strong></td>
                                        <td><strong>Country of Residence:</strong></td>
                                        <td><strong>Phone:</strong></td>
                                        <td><strong>Email:</strong></td>
                                        <td><strong>Relationship:</strong></td>
                                        <td><strong>Address:</strong></td>
                                        <td><strong>Photo:</strong></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                    {% for keen in next_of_keens %}
                                    <tr>
                                        <td>{{ keen.firstname }} {{ keen.lastname }} {{ keen.othername|default:"" }}</td>
                                        <td>{{ keen.client.client_number }}</td>
                                        <td>{{ keen.client.gender }}</td>
                                        <td>{{ keen.client.date_of_birth }}</td>
                                        <td>{{ keen.client.nationality }}</td>
                                        <td>{{ keen.client.country_of_residence }}</td>
                                        <td>{{ keen.telephone }}</td>
                                        <td>{{ keen.email|default:"—" }}</td>
                                        <td>{{ keen.relationship }}</td>
                                        <td>{{ keen.address }}</td>
                                        <td>
                                            {% if keen.photo %} <img src="{{ keen.photo.url }}" class="me-2 avatar-sm rounded-circle"style="max-width: 100px;">{% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
            

                    </div>
                </div>
            {% else %}
                <div class="alert alert-warning mt-4">
                    No Next of Keen information found for this client.
                </div>
            {% endif %}


         
                          
        </div> <!-- container -->

        {% block footer %}{% include "client/footer.html" %}{% endblock %}
</div>
{% endblock %}