{% extends "base.html" %}
{% load crispy_forms_filters %}
{% load static %}
{% load i18n %}
{% block title %}
        <h1>{% trans 'Sale Order' %}</h1>
{% endblock %}
{% block content %}
  <link rel="stylesheet" href="{% static 'flags/sprite.css' %}" />
  <div class="row">
    <div class="row mb-3">
      <div class="col-sm-6 col-md-8">
        <div class="d-sm-flex justify-content-between">
          <h3 class="mb-3">
            {% if customer.created %}
              {{ _('Edit Sale Order') }}
            {% else %}
              {{ _('Add Sale Order') }}
            {% endif %}
            <span class="fas fa-shopping-cart text-primary ms-2"></span>
          </h3>
        </div>
      </div>
    </div>

    <div class="row mb-3">
      <div class="col-xl-12 col-xxl-12">
        <div class="px-xl-12">
          <div class="row mx-0 mx-sm-3 mx-lg-0 px-lg-0">
            <div class="col-sm-12 col-xxl-6 py-3">
              <table class="w-100 table-stats ">
                <tr>
                  <th></th>
                  <th></th>
                  <th></th>
                </tr>
                <tr>
                  <td class="py-2">
                    <div class="d-inline-flex align-items-center">
                      <div class="d-flex bg-success-subtle rounded-circle flex-center me-3" style="width:24px; height:24px">
                        <span class="text-success-dark" data-feather="user" style="width:16px; height:16px"></span>
                      </div>
                      <p class="fw-bold mb-0">{{ _("Customer Name")}}</p>
                    </div>
                  </td>
                  <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
                  <td class="py-2">
                    <p class="ps-6 ps-sm-0 fw-semibold mb-0 mb-0 pb-3 pb-sm-0">{{ estimate.customer.customer_name }}</p>
                  </td>
                </tr>
                <tr>
                  <td class="py-2">
                    <div class="d-flex align-items-center">
                      <div class="d-flex bg-success-subtle rounded-circle flex-center me-3" style="width:24px; height:24px">
                        <span class="text-success-dark" data-feather="mail" style="width:16px; height:16px"></span>
                      </div>
                      <p class="fw-bold mb-0">{{ _("Email") }}</p>
                    </div>
                  </td>
                  <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
                  <td class="py-2">
                    <p class="ps-6 ps-sm-0 fw-semibold mb-0">{{ estimate.customer.email }}</p>
                  </td>
                </tr>
                <tr>
                  <td class="py-2">
                    <div class="d-flex align-items-center">
                      <div class="d-flex bg-success-subtle rounded-circle flex-center me-3" style="width:24px; height:24px">
                        <span class="text-success-dark" data-feather="map-pin" style="width:16px; height:16px"></span>
                      </div>
                      <p class="fw-bold mb-0">{{ _("Address") }}</p>
                    </div>
                  </td>
                  <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
                  <td class="py-2">
                    <p class="ps-6 ps-sm-0 fw-semibold mb-0">{{ estimate.customer.address_1 }}</p>
                  </td>
                </tr>
                <tr>
                  <td class="py-2">
                    <div class="d-flex align-items-center">
                      <div class="d-flex bg-success-subtle rounded-circle flex-center me-3" style="width:24px; height:24px">
                        <span class="text-success-dark" data-feather="trending-down" style="width:16px; height:16px"></span>
                      </div>
                      <p class="fw-bold mb-0">{{ _("Total Discount")}}</p>
                    </div>
                  </td>
                  <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
                  <td class="py-2">
                    <p class="ps-6 ps-sm-0 fw-semibold mb-0">{{ data.total_discount }} <span class="icon-saudi_riyal"></span></p>
                  </td>
                </tr>
                <tr>
                  <td class="py-2">
                    <div class="d-flex align-items-center">
                      <div class="d-flex bg-success-subtle rounded-circle flex-center me-3" style="width:24px; height:24px">
                        <span class="text-success-dark" data-feather="briefcase" style="width:16px; height:16px"></span>
                      </div>
                      <p class="fw-bold mb-0">{{ _("Total Amount")}}</p>
                    </div>
                  </td>
                  <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
                  <td class="py-2">
                    <p class="ps-6 ps-sm-0 fw-semibold mb-0">{{ data.grand_total }} <span class="icon-saudi_riyal"></span></p>
                  </td>
                </tr>

              </table>
            </div>
          </div>
          <div class="row">
            <div class="border-top border-bottom border-translucent mt-10" id="leadDetailsTable">
              <div class="table-responsive scrollbar mx-n1 px-1">
                <table class="table fs-9 mb-0">
                  <thead>
                    <tr>
                      <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
                        <div class="form-check mb-0 fs-8">
                          <input class="form-check-input" type="checkbox" />
                        </div>
                      </th>
                      <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="name" style="width:20%; min-width:100px">
                        {{ _("VIN") }}</th>
                      <th class="sort align-middle pe-6 text-uppercase" scope="col" data-sort="description" style="width:20%; max-width:60px">
                        {{ _("Make") }}</th>
                      <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="create_date" style="width:20%; min-width:115px">
                        {{ _("Model") }}</th>
                      <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="create_by" style="width:20%; min-width:150px">
                        {{ _("Year") }}</th>
                      <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="create_by" style="width:20%; min-width:150px">
                        {{ _("Unit Price")}}</th>
                      <th class="align-middle pe-0 text-end" scope="col" style="width:15%;"></th>
                    </tr>
                  </thead>
                  <tbody class="list" id="lead-details-table-body">
                    {% for car in data.cars %}
                      <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                        <td class="fs-9 align-middle px-0 py-3">
                          <div class="form-check mb-0 fs-8">
                            <input class="form-check-input" type="checkbox" />
                          </div>
                        </td>
                        <td class="name align-middle white-space-nowrap py-2 ps-0">
                          <a class="d-flex align-items-center text-body-highlight" href="#!">
                    {% comment %} <div class="avatar avatar-m me-3 status-online">
                        <img class="rounded-circle" src="" alt="" />
                                                        </div> {% endcomment %}
                                                        <h6 class="mb-0 text-body-highlight fw-bold">{{ car.vin }}</h6>
                                                    </a>
                                                </td>
                                                <td class="description align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2 pe-6">
                                                    {{ car.make }}
                                                </td>
                                                <td class="create_by align-middle white-space-nowrap fw-semibold text-body-highlight">{{ car.model }}</td>
                                                <td class="create_by align-middle white-space-nowrap fw-semibold text-body-highlight">{{ car.year }}</td>
                                                <td class="last_activity align-middle text-center py-2">
                                                    <div class="d-flex align-items-center flex-1">
                                                        <span class="fw-bold fs-9 text-body">{{ car.total }} <span class="icon-saudi_riyal"></span></span>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="row mx-0">
                        <form method="post" class="form row g-3 needs-validation" novalidate>
                            {% csrf_token %}
                            <div class="col-md-6">
                                <label for="id_estimate" class="form-label">{% trans "Quotation" %}</label>
                                <input type="text"
                                       class="form-control form-control-sm"
                                       id="id_estimate"
                                       name="estimate"
                                       value="{{ form.estimate.value|default_if_none:'' }}"
                                       readonly>
                                <div class="invalid-feedback">{% trans "Please provide an estimate." %}</div>
                            </div>
                            <div class="col-md-6">
                                <label for="id_payment_method" class="form-label">{% trans "Payment Method" %}</label>
                                <select class="form-select form-select-sm"
                                        id="id_payment_method"
                                        name="payment_method"
                                        required>
                                    {% for value, label in form.payment_method.field.choices %}
                                        <option value="{{ value }}"
                                                {% if form.payment_method.value == value %}selected{% endif %}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                                <div class="invalid-feedback">{% trans "Please select a payment method." %}</div>
                            </div>
                            <div class="col-12">
                                <label for="id_comments" class="form-label">{% trans "Comments" %}</label>
                                <textarea class="form-control" id="id_comments" name="comments" rows="3">{{ form.comments.value|default_if_none:'' }}</textarea>
                            </div>
                            <div class="col-12">
                                <button class="btn btn-phoenix-primary" type="submit">{% trans 'Save' %}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!---->
{% endblock content %}