{% extends "base.html" %}
{% load i18n static%}
{% load crispy_forms_filters %}
{% block title %}{% trans "Customers" %}{% endblock title %}

{% 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 Customer") }}
                {% else %}
                {{ _("Add Customer") }}
                {% endif %}
                </h3>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-sm-6 col-md-8">
            <form class="row g-3" method="post" class="form" novalidate>
                {% csrf_token %}
                <div class="col-sm-6 col-md-4">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="{{ form.first_name.id_for_label }}" name="{{ form.first_name.name }}" value="{{ form.first_name.value|default:'' }}" placeholder="{{ _("First Name")}}">
                        <label for="{{ form.first_name.id_for_label }}">{{ _("First Name")}}</label>
                        {{ form.first_name.errors }}
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="{{ form.middle_name.id_for_label }}" name="{{ form.middle_name.name }}" value="{{ form.middle_name.value|default:'' }}" placeholder="{{ _("Middle Name")}}">
                        <label for="{{ form.middle_name.id_for_label }}">{{ _("Middle Name")}}</label>
                        {{ form.middle_name.errors }}
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="{{ form.last_name.id_for_label }}" name="{{ form.last_name.name }}" value="{{ form.last_name.value|default:'' }}" placeholder="{{ _("Last Name")}}">
                        <label for="{{ form.last_name.id_for_label }}">{{ _("Last Name")}}</label>
                        {{ form.last_name.errors }}
                    </div>
                </div>
                <div class="col-sm-6 col-md-2">
                    <div class="form-floating">
                        <select class="form-control" id="{{ form.title.id_for_label }}" name="{{ form.title.name }}">
                        {% for value, label in form.title.field.choices %}
                        <option value="{{ value }}" {% if form.title.value == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                        </select>
                        <label for="{{ form.title.id_for_label }}">Title</label>
                        {{ form.title.errors }}
                    </div>
                </div>
                <div class="col-sm-6 col-md-2">
                    <div class="form-floating">
                        <select class="form-control" id="{{ form.gender.id_for_label }}" name="{{ form.gender.name }}">
                        {% for value, label in form.gender.field.choices %}
                        <option value="{{ value }}" {% if form.gender.value == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                        </select>
                        <label for="{{ form.gender.id_for_label }}">{{ _("Gender") }}</label>
                        {{ form.gender.errors }}
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="form-floating">
                        <input type="date" class="form-control" id="{{ form.dob.id_for_label }}" name="{{ form.dob.name }}" value="{{ form.dob.value|date:'Y-m-d' }}">
                        <label for="{{ form.dob.id_for_label }}">{{ _("Date of Birth")}}</label>
                        {{ form.dob.errors }}
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="form-floating">
                        <input type="email" class="form-control" id="{{ form.email.id_for_label }}" name="{{ form.email.name }}" value="{{ form.email.value|default:'' }}" placeholder="{{ _("Email") }}">
                        <label for="{{ form.email.id_for_label }}">{{ _("Email") }}</label>
                        {{ form.email.errors }}
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="{{ form.national_id.id_for_label }}" name="{{ form.national_id.name }}" value="{{ form.national_id.value|default:'' }}" placeholder="{{ _("Enter national ID")}}">
                        <label for="{{ form.national_id.id_for_label }}">{{ _("National ID")}}</label>
                        {{ form.national_id.errors }}
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="{{ form.city.id_for_label }}" name="{{ form.city.name }}" value="{{ form.city.value|default:'' }}" placeholder="{{ _("City")}}">
                        <label for="{{ form.city.id_for_label }}">{{ _("City") }}</label>
                        {{ form.country.errors }}
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="form-floating">
                        <input type="tel" class="form-control" id="{{ form.phone_number.id_for_label }}" name="{{ form.phone_number.name }}" value="{{ form.phone_number.value|default:'' }}" placeholder="phone">
                        <i class="{{ country.flag_css }}"></i>
                        <label for="{{ form.phone_number.id_for_label }}">{{ _("Phone Number")}}</label>
                        {{ form.phone_number.errors }}
                    </div>
                </div>
                <div class="col-sm-6 col-md-12">
                    <div class="form-floating">
                        <textarea class="form-control" id="{{ form.address.id_for_label }}" name="{{ form.address.name }}" placeholder="Enter address">{{ form.address.value|default:'' }}</textarea>
                        <label for="{{ form.address.id_for_label }}">{{ _("Address") }}</label>
                        {{ form.address.errors }}
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                <div class="d-flex mb-3">
                    <a href="{{request.META.HTTP_REFERER}}" class="btn btn-phoenix-primary me-2 px-6">{% trans "cancel"|capfirst %}</a>
                    <button class="btn btn-primary" type="submit">
                    {{ _("Save") }}
                    </button>
                </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}