{% extends 'base.html' %}
{% load i18n static custom_filters crispy_forms_filters %}
{% block title %}
    {% trans 'Profile' %}
{% endblock %}
{% block content %}
    <div class="container-fluid mb-3">
        <div class="row align-items-center justify-content-between g-3 mb-4">
            <div class="col-auto">
                <h2 class="mb-0">{% trans 'Profile' %}</h2>
            </div>
            <div class="col-auto">
                <div class="dropdown">
                    <button class="btn btn-phoenix-primary dropdown-toggle"
                            type="button"
                            data-bs-toggle="dropdown"
                            aria-expanded="false">
                        <span class="fas fa-cog me-2"></span>{{ _("Manage Profile") }}
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li>
                            <a class="dropdown-item" href="{% url 'dealer_update' dealer.slug %}"><span class="fas fa-edit me-2"></span>{{ _("Edit Profile") }}</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="{% url 'billing_info' %}"><span class="fas fa-credit-card me-2"></span>{{ _("Billing Information") }}</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="{% url 'order_list' %}"><span class="fas fa-clipboard-list me-2"></span>{{ _("Plans History") }}</a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <a class="dropdown-item text-danger"
                               href="{% url 'account_change_password' %}"><span class="fas fa-key me-2"></span>{{ _("Change Password") }}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row g-3 mb-4">
            <div class="col-12">
                <div class="card shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex flex-column flex-sm-row align-items-sm-center g-3 g-sm-5 text-center text-sm-start">
                            <div class="col-12 col-sm-auto mb-3 mb-sm-0">
                                <input class="d-none" id="avatarFile" type="file" />
                                <label class="cursor-pointer avatar avatar-5xl border rounded-circle shadow-sm"
                                       for="avatarFile">
                                    {% if dealer.logo %}
                                        <img src="{{ dealer.logo.url }}"
                                             alt="{{ dealer.get_local_name }}"
                                             class="rounded-circle"
                                             style="max-width: 150px" />
                                    {% else %}
                                        <img src="{% static 'images/logos/logo.png' %}"
                                             alt="{{ dealer.get_local_name }}"
                                             class="rounded-circle"
                                             style="max-width: 150px" />
                                    {% endif %}
                                </label>
                            </div>
                            <div class="flex-1 col-12 col-sm ms-2">
                                <h3>{{ dealer.get_local_name }}</h3>
                                <p class="text-body-secondary mb-1">{% trans 'Joined' %} {{ dealer.joined_at|timesince }} {% trans 'ago' %}</p>
                                <span class="badge bg-primary-subtle text-primary">{% trans 'Last login' %}: {{ dealer.user.last_login|date:"D M d, Y H:i" }}</span>
                            </div>
                            <div class="col-12 col-sm-auto d-flex align-items-center justify-content-around flex-wrap mt-3 mt-sm-0">
                                <div class="text-center mx-3 mb-2 mb-sm-0">
                                    <h6 class="mb-2 text-body-secondary">{% trans 'Total users'|capfirst %}</h6>
                                    <h4 class="fs-7 text-body-highlight mb-2">{{ dealer.staff_count }}</h4>
                                    <div class="progress" style="height: 5px; width: 100px;">
                                        <div class="progress-bar bg-success"
                                             role="progressbar"
                                             style="width: {{ dealer.staff_count|get_percentage:allowed_users }}%"
                                             aria-valuenow="{{ dealer.staff_count|get_percentage:allowed_users }}"
                                             aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="text-center mx-3 mb-2 mb-sm-0">
                                    <h6 class="mb-2 text-body-secondary">{% trans 'Total cars'|capfirst %}</h6>
                                    <h4 class="fs-7 text-body-highlight mb-2">{{ cars_count }}</h4>
                                    <div class="progress" style="height: 5px; width: 100px;">
                                        <div class="progress-bar bg-info"
                                             role="progressbar"
                                             style="width: {{ cars_count|get_percentage:allowed_cars }}%"
                                             aria-valuenow="{{ cars_count|get_percentage:allowed_cars }}"
                                             aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row g-3">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <ul class="nav nav-tabs nav-justified" id="profileTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active"
                                        id="subscription-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#subscription-pane"
                                        type="button"
                                        role="tab"
                                        aria-controls="subscription-pane"
                                        aria-selected="true">
                                    <span class="fas fa-star me-2"></span>{{ _("Plan & Subscription") }}
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link"
                                        id="contact-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#contact-pane"
                                        type="button"
                                        role="tab"
                                        aria-controls="contact-pane"
                                        aria-selected="false">
                                    <span class="fas fa-info-circle me-2"></span>{{ _("Company Details") }}
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link"
                                        id="makes-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#makes-pane"
                                        type="button"
                                        role="tab"
                                        aria-controls="makes-pane"
                                        aria-selected="false">
                                    <span class="fas fa-car me-2"></span>{{ _("Car Brands") }}
                                </button>
                            </li>
                        </ul>
                        <div class="tab-content pt-4" id="profileTabsContent">
                            <div class="tab-pane fade show active"
                                 id="subscription-pane"
                                 role="tabpanel"
                                 aria-labelledby="subscription-tab">
                                <div class="row g-3">
                                    <div class="col-12 col-lg-6">
                                        <div class="card  h-100 shadow-sm">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center justify-content-between mb-3">
                                                    <h3 class="mb-0">{{ dealer.user.userplan.plan|capfirst }}</h3>
                                                    {% if dealer.user.userplan and not dealer.user.userplan.is_expired %}
                                                        <span class="badge bg-success-subtle text-success">{{ _("Active") }}</span>
                                                    {% elif dealer.user.userplan and dealer.user.userplan.is_expired %}
                                                        <span class="badge bg-danger-subtle text-danger">{{ _("Expired") }}</span>
                                                    {% else %}
                                                        <span class="badge bg-warning-subtle text-warning">{{ _("No Active Plan") }}</span>
                                                    {% endif %}
                                                </div>
                                                <p class="fs-9 text-body-secondary">
                                                    {% if dealer.user.userplan and not dealer.user.userplan.is_expired %}
                                                        {% trans 'Active until' %}: {{ dealer.user.userplan.expire }} &nbsp; <small>{% trans 'Days left' %}: {{ dealer.user.userplan.days_left }}</small>
                                                    {% else %}
                                                        {% trans 'Please subscribe or renew your plan to continue using our services.' %}
                                                    {% endif %}
                                                </p>
                                                <div class="d-flex align-items-end mb-3">
                                                    <h4 class="fw-bolder me-1">
                                                        {{ dealer.user.userplan.plan.planpricing_set.first.price }} <span class="icon-saudi_riyal"></span>
                                                    </h4>
                                                </div>
                                                <ul class="list-unstyled mb-4">
                                                    {% for line in dealer.user.userplan.plan.description|splitlines %}
                                                        <li class="d-flex align-items-center mb-1">
                                                            <span class="uil uil-check-circle text-success me-2"></span>
                                                            <span class="text-body-secondary">{{ line }}</span>
                                                        </li>
                                                    {% endfor %}
                                                </ul>
                                                {% comment %} <div class="d-flex justify-content-end gap-2">
                                                {% if dealer.user.userplan.is_expired %}
                                                     <a href="{% url 'pricing_page' request.dealer.slug %}" class="btn btn-warning"><span class="fas fa-redo-alt me-2"></span>{{ _("Renew") }}</a>
                                                {% endif %}
                                                {% if dealer.user.userplan.plan.name != "Enterprise" %}
                                                     <a href="{% url 'pricing_page' request.dealer.slug %}" class="btn btn-primary"><span class="fas fa-rocket me-2"></span>{{ _("Upgrade Plan") }}</a>
                                                {% endif %}
                                                {% if not dealer.user.userplan %}
                                                         <a href="{% url 'pricing_page' request.dealer.slug %}" class="btn btn-success"><span class="fas fa-cart-plus me-2"></span>{{ _("Subscribe Now") }}</a>
                                                {% endif %}
                                                </div> {% endcomment %}
                                                <div class="d-flex justify-content-end gap-2">
                                                    {% if not dealer.user.userplan %}
                                                        <a href="{% url 'pricing_page' request.dealer.slug %}"
                                                           class="btn btn-outline-primary"><span class="fas fa-cart-plus me-2"></span>{{ _("Subscribe Now") }}</a>
                                                    {% elif dealer.user.userplan.is_expired %}
                                                        <a href="{% url 'pricing_page' request.dealer.slug %}"
                                                           class="btn btn-outline-warning"><span class="fas fa-redo-alt me-2"></span>{{ _("Renew") }}</a>
                                                    {% elif dealer.user.userplan.plan.name != "Enterprise" %}
                                                        <a href="{% url 'pricing_page' request.dealer.slug %}"
                                                           class="btn btn-outline-primary"><span class="fas fa-rocket me-2"></span>{{ _("Upgrade Plan") }}</a>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-lg-6">
                                        <div class="card h-100 shadow-sm">
                                            <div class="card-body d-flex flex-column justify-content-center">
                                                <div class="d-flex justify-content-between mb-4">
                                                    <h5 class="mb-0 text-body-highlight">{{ _("Manage Users & Cars") }}</h5>
                                                </div>
                                                <div class="mb-4">
                                                    <h6 class="text-body-secondary">{{ _("Total users") }}</h6>
                                                    <div class="progress" style="height: 10px;">
                                                        <div class="progress-bar bg-success"
                                                             role="progressbar"
                                                             style="width: {{ dealer.staff_count|get_percentage:allowed_users }}%"
                                                             aria-valuenow="{{ dealer.staff_count|get_percentage:allowed_users }}"
                                                             aria-valuemin="0"
                                                             aria-valuemax="100"></div>
                                                    </div>
                                                    <div class="d-flex justify-content-between text-body-secondary fs-9 mt-2">
                                                        <span>{{ _("Used") }}: {{ dealer.staff_count }}</span>

                                                    </div>
                                                </div>
                                                <div class="mb-4">
                                                    <h6 class="text-body-secondary">{{ _("Total cars") }}</h6>
                                                    <div class="progress" style="height: 10px;">
                                                        <div class="progress-bar bg-info"
                                                             role="progressbar"
                                                             style="width: {{ cars_count|get_percentage:allowed_cars }}%"
                                                             aria-valuenow="{{ cars_count|get_percentage:allowed_cars }}"
                                                             aria-valuemin="0"
                                                             aria-valuemax="100"></div>
                                                    </div>
                                                    <div class="d-flex justify-content-between text-body-secondary fs-9 mt-2">
                                                        <span>{{ _("Used") }}: {{ cars_count }}</span>

                                                    </div>
                                                </div>
                                                <small class="text-body-secondary mt-auto">{{ _("Contact support to increase your limits") }}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade"
                                 id="contact-pane"
                                 role="tabpanel"
                                 aria-labelledby="contact-tab">
                                <div class="row g-3">
                                    <div class="col-12 col-lg-6">
                                        <div class="card h-100 shadow-sm">
                                            <div class="card-body">
                                                <h5 class="mb-3">{% trans 'Contact Information' %}</h5>
                                                <div class="d-flex align-items-center mb-3">
                                                    <span class="fas fa-location-dot me-3 text-primary"></span>
                                                    <div>
                                                        <h6 class="mb-0">{% trans 'Address' %}</h6>
                                                        <p class="mb-0 text-body-secondary">{{ dealer.address }}</p>
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center mb-3">
                                                    <span class="fas fa-envelope me-3 text-info"></span>
                                                    <div>
                                                        <h6 class="mb-0">{% trans 'Email' %}</h6>
                                                        <p class="mb-0 text-body-secondary">{{ dealer.user.email }}</p>
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <span class="fas fa-phone me-3 text-success"></span>
                                                    <div>
                                                        <h6 class="mb-0">{% trans 'Phone' %}</h6>
                                                        <p class="mb-0 text-body-secondary" dir="ltr">{{ dealer.phone_number }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-lg-6">
                                        <div class="card h-100 shadow-sm">
                                            <div class="card-body">
                                                <h5 class="mb-3">{{ _("VAT Information") }}</h5>
                                                <form action="{% url 'dealer_vat_rate_update' request.dealer.slug %}"
                                                      method="post">
                                                    {% csrf_token %}
                                                    {{ vatform|crispy }}
                                                    <button class="btn btn-phoenix-primary mt-3" type="submit">
                                                        <i class="fa-solid fa-pen-to-square me-1"></i>{% trans 'Update VAT' %}
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade"
                                 id="makes-pane"
                                 role="tabpanel"
                                 aria-labelledby="makes-tab">
                                <div class="card h-100 shadow-sm">
                                    <div class="card-body">
                                        <h5 class="mb-4">{{ _("Makes you are selling") }}</h5>
                                        <div class="d-flex flex-wrap gap-3 mb-4">
                                            {% for make in car_makes %}
                                                <div class="text-center p-2 border rounded-3">
                                                    {% if make.logo %}
                                                        <img src="{{ make.logo.url }}"
                                                             alt="{{ make.get_local_name }}"
                                                             class="rounded"
                                                             style="height: 48px;
                                                                    width: auto;
                                                                    background-color:white" />
                                                    {% endif %}
                                                    <p class="fs-8 text-body-secondary mt-1 mb-0">{{ make.get_local_name }}</p>
                                                </div>
                                            {% empty %}
                                                <p class="text-body-secondary">{{ _("No car makes selected.") }}</p>
                                            {% endfor %}
                                        </div>
                                        <a class="btn btn-phoenix-warning"
                                           href="{% url 'assign_car_makes' request.dealer.slug %}"><span class="fas fa-plus me-2"></span>{{ _("Select Makes") }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}