{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% load tenhal_tag %}

{% block title %}{{ service.name|title }} - {% trans "My Company" %}{% endblock %}

{% block content %}

    <section class="hero-section text-center py-5">
        <div class="container">
            <h1 class="display-5 fw-bold">{{ service.name|title }}</h1>
            <p class=" mt-3">{{ service.description|default:"No description provided." }}</p>
        </div>
    </section>

    <section class="py-5">
        <div class="container">

            <div class="card mb-5 p-4 p-lg-5">
                <div class="card-body">

                    <h2 class="card-title fw-bold mb-4">{% trans "Service Details" %}</h2>


                    <div class="row g-4 mb-3">
                        <div class="col-lg-8"><a class="btn btn-phoenix-primary me-1" href="{% url 'item_service_update' request.dealer.slug service.pk %}"> Edit</a></div>
                        <div class="col-lg-4"><a class="btn btn-phoenix-secondary mb-2" href="{% url 'item_service_list' request.dealer.slug %}">Back To List</a></div>
                    </div>

                    <div class="row  g-4 text-center text-md-start">

                        <div class="col-md-4">
                            <h6 class="text-uppercase text-muted small mb-1">{% trans 'Service Name' %}</h6>
                            <p class="fw-bold fs-7 mb-0">{{ service.name|capfirst }}</p>
                        </div>

                        <div class="col-md-4">
                            <h6 class="text-uppercase text-muted small mb-1">{% trans 'Price' %}</h6>
                            <p class="fw-bold fs-7 mb-0">{{ service.price }}<span class="icon-saudi_riyal ms-1"></span></p>
                        </div>

                        <div class="col-md-2">
                            <h6 class="text-uppercase text-muted small mb-1">{% trans 'Unit of Measure' %}</h6>
                            <p class="fw-bold fs-7 mb-0">{{ service.get_uom_display }}</p>
                        </div>

                        <div class="col-md-2">
                            <h6 class="text-uppercase text-muted small mb-1">{% trans 'Tax Status' %}</h6>
                            <p class="fw-bold fs-7 mb-0">{% if service.taxable %}{% trans 'Taxable' %}{% else %}{% trans 'Non Taxable' %}{% endif %}</p>
                        </div>

                    </div>

                </div>
            </div>

            <div class="text-center my-5 py-5 border rounded-3 p-4">
                <h2 class="fw-bold text-muted mb-4">{% trans "Total Revenue from this service" %}</h2>
                <p class="display-5 fw-bold mb-0 text-primary">{{ total_services_price }}<span class="icon-saudi_riyal ms-4"></span></p>
            </div>

        </div>
    </section>

{% endblock %}