{% extends "vendor/manage/base.html" %}
{% load i18n %}

{% block extra_css %}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
{% endblock %}

{% block extra_head_js %}
{% endblock %}

{% block vendor_content %}
<nav aria-label="breadcrumb">
    <h1>{% trans 'Offer' %}</h1>
</nav>
<div class="row">
    <div class='card'>
        <div class='card-header'>
            {% trans 'Offer Detail' %}
        </div>
        <div class='card-body'>
            <form method="post">
                {% csrf_token %}
                {% comment %}
                <!-- None Fields Errors -->
                {% endcomment %}
                {% if form.non_field_errors %}
                <div class="alert alert-danger" role="alert">
                    {% for error in form.non_field_errors %}
                    {{ error }}
                    {% endfor %}
                </div>
                {% endif %}
                {% comment %}
                <!-- Name -->
                {% endcomment %}
                <div class='form-row my-3'>
                    <div class='col-md-6'>
                        <!-- Address 1 -->
                        {{ form.name.label_tag }}
                        {{ form.name }}
                        {% if form.name.errors %}
                        {% for error in form.name.errors %}
                        <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                            {{ error }}
                        </div>
                        {% endfor %}
                        {% endif %}

                        {% if form.name.help_text %}
                        <small class="form-text text-muted">
                            {{ form.name.help_text }}
                        </small>
                        {% endif %}
                    </div>
                </div>
                {% comment %}
                <!-- Start and End Date -->
                {% endcomment %}
                <div class='form-row my-3'>
                    <div class="col-md-12 my-2">{% trans 'Offer available through:' %}</div>
                    <div class='col-md-4'>
                        <small>{{ form.start_date.label_tag }}</small>
                        {{ form.start_date }}
                        {% if form.start_date.errors %}
                        {% for error in form.start_date.errors %}
                        <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                            {{ error }}
                        </div>
                        {% endfor %}
                        {% endif %}

                        {% if form.start_date.help_text %}
                        <small class="form-text text-muted">
                            {{ form.start_date.help_text }}
                        </small>
                        {% endif %}
                    </div>
                    <div class='col-md-4'>
                        <small>{{ form.end_date.label_tag }}</small>
                        {{ form.end_date }}
                        {% if form.end_date.errors %}
                        {% for error in form.end_date.errors %}
                        <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                            {{ error }}
                        </div>
                        {% endfor %}
                        {% endif %}

                        {% if form.end_date.help_text %}
                        <small class="form-text text-muted">
                            {{ form.end_date.help_text }}
                        </small>
                        {% endif %}
                    </div>
                </div>
                {% comment %}
                <!-- Terms -->
                {% endcomment %}
                <div class='form-row my-3'>
                    <div class='col-md-6'>
                        {{ form.terms.label_tag }}
                        {{ form.terms }}
                        {% if form.terms.errors %}
                        {% for error in form.terms.errors %}
                        <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                            {{ error }}
                        </div>
                        {% endfor %}
                        {% endif %}

                        {% if form.terms.help_text %}
                        <small class="form-text text-muted">
                            {{ form.terms.help_text }}
                        </small>
                        {% endif %}
                    </div>
                </div>
                {% comment %}
                <!-- Terms Details -->
                {% endcomment %}
                <div class='form-row my-3'>
                    <div class='col-md-6'>
                        {{ form.term_details.label_tag }}
                        {{ form.term_details }}
                        {% if form.term_details.errors %}
                        {% for error in form.term_details.errors %}
                        <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                            {{ error }}
                        </div>
                        {% endfor %}
                        {% endif %}

                        {% if form.term_details.help_text %}
                        <small class="form-text text-muted">
                            {{ form.term_details.help_text }}
                        </small>
                        {% endif %}
                    </div>
                </div>
                {% comment %}
                <!-- Terms Start Date -->
                {% endcomment %}
                <div class='form-row my-3'>
                    <div class='col-md-6'>
                        {{ form.term_start_date.label_tag }}
                        {{ form.term_start_date }}
                        {% if form.term_start_date.errors %}
                        {% for error in form.term_start_date.errors %}
                        <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                            {{ error }}
                        </div>
                        {% endfor %}
                        {% endif %}

                        {% if form.term_start_date.help_text %}
                        <small class="form-text text-muted">
                            {{ form.term_start_date.help_text }}
                        </small>
                        {% endif %}
                    </div>
                </div>
                {% comment %}
                <!-- Available -->
                {% endcomment %}
                <div class='form-row my-3'>
                    <div class='col-md-6'>
                        {{ form.available.label_tag }}
                        {{ form.available }}
                        {% if form.available.errors %}
                        {% for error in form.available.errors %}
                        <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                            {{ error }}
                        </div>
                        {% endfor %}
                        {% endif %}

                        {% if form.available.help_text %}
                        <small class="form-text text-muted">
                            {{ form.available.help_text }}
                        </small>
                        {% endif %}
                    </div>
                </div>
                {% comment %}
                <!-- Description -->
                {% endcomment %}
                <div class='form-row my-3'>
                    <div class='col-md-6'>
                        {{ form.offer_description.label_tag }}
                        {{ form.offer_description }}
                        {% if form.offer_description.errors %}
                        {% for error in form.offer_description.errors %}
                        <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                            {{ error }}
                        </div>
                        {% endfor %}
                        {% endif %}

                        {% if form.offer_description.help_text %}
                        <small class="form-text text-muted">
                            {{ form.offer_description.help_text }}
                        </small>
                        {% endif %}
                    </div>
                </div>
                {% comment %}
                <!-- Allow Multiple -->
                {% endcomment %}
                <div class='form-row my-3'>
                    <div class='col-md-6'>
                        {{ form.allow_multiple.label_tag }}
                        {{ form.allow_multiple }}
                        {% if form.allow_multiple.errors %}
                        {% for error in form.allow_multiple.errors %}
                        <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                            {{ error }}
                        </div>
                        {% endfor %}
                        {% endif %}

                        {% if form.allow_multiple.help_text %}
                        <small class="form-text text-muted">
                            {{ form.allow_multiple.help_text }}
                        </small>
                        {% endif %}
                    </div>
                </div>
                {% comment %}
                <!-- Products -->
                {% endcomment %}
                <div class='form-row my-3'>
                    <div class='col-md-6'>
                        {{ form.products.label_tag }}
                        {{ form.products }}
                        {% if form.products.errors %}
                        {% for error in form.products.errors %}
                        <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                            {{ error }}
                        </div>
                        {% endfor %}
                        {% endif %}

                        {% if form.products.help_text %}
                        <small class="form-text text-muted">
                            {{ form.products.help_text }}
                        </small>
                        {% endif %}
                    </div>
                </div>

                <h5>{% trans 'Cost' %}</h5>
                {{ formset.management_form }}
                <table>
                    {% for price_form in formset.forms %}
                    {{ price_form.id }}
                    {% comment %}
                    <!-- Price Select -->
                    {% endcomment %}
                    <div class='form-row my-3'>
                        <div class="col-12">
                            {{ price_form.price_select.label_tag }}
                        </div>
                        <div class='d-flex flex-row align-items-center mx-1'>
                            {% for radio in price_form.price_select %}
                            <label class="mr-2" for="{{ radio.id_for_label }}">
                                <span class="radio">{{ radio.tag }}</span>
                                {{ radio.choice_label }}
                            </label>
                            {% endfor %}
                        </div>
                        <div class="col-12">
                            {% if price_form.price_select.errors %}
                            {% for error in price_form.price_select.errors %}
                            <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                                {{ error }}
                            </div>
                            {% endfor %}
                            {% endif %}

                            {% if price_form.price_select.help_text %}
                            <small class="form-text text-muted">
                                {{ price_form.price_select.help_text }}
                            </small>
                            {% endif %}
                        </div>
                    </div>
                    {% comment %}
                    <!-- Cost and Currency -->
                    {% endcomment %}
                    <div class='form-row my-3' id="price_select">
                        <div class="d-flex flex-row ml-1">
                            <div class="d-flex flex-column">
                                <small>{{ price_form.cost.label_tag }}</small>
                                {{ price_form.cost }}
                                {% if price_form.cost.errors %}
                                {% for error in price_form.cost.errors %}
                                <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                                    {{ error }}
                                </div>
                                {% endfor %}
                                {% endif %}

                                {% if price_form.cost.help_text %}
                                <small class="form-text text-muted">
                                    {{ price_form.cost.help_text }}
                                </small>
                                {% endif %}
                            </div>
                            <div class="d-flex flex-column">
                                <small>{{ price_form.currency.label_tag }}</small>
                                {{ price_form.currency }}
                                {% if price_form.currency.errors %}
                                {% for error in price_form.currency.errors %}
                                <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                                    {{ error }}
                                </div>
                                {% endfor %}
                                {% endif %}

                                {% if price_form.currency.help_text %}
                                <small class="form-text text-muted">
                                    {{ price_form.currency.help_text }}
                                </small>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% comment %}
                    <!-- Start and End Date -->
                    {% endcomment %}
                    <div class='form-row my-3'>
                        <div class="col-md-12 my-2">{% trans 'Price for this offer available through:' %}</div>
                        <div class='col-md-4'>
                            <small>{{ price_form.start_date.label_tag }}</small>
                            {{ price_form.start_date }}
                            {% if price_form.start_date.errors %}
                            {% for error in price_form.start_date.errors %}
                            <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                                {{ error }}
                            </div>
                            {% endfor %}
                            {% endif %}

                            {% if price_form.start_date.help_text %}
                            <small class="form-text text-muted">
                                {{ price_form.start_date.help_text }}
                            </small>
                            {% endif %}
                        </div>
                        <div class='col-md-4'>
                            <small>{{ price_form.end_date.label_tag }}</small>
                            {{ price_form.end_date }}
                            {% if price_form.end_date.errors %}
                            {% for error in price_form.end_date.errors %}
                            <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                                {{ error }}
                            </div>
                            {% endfor %}
                            {% endif %}

                            {% if price_form.end_date.help_text %}
                            <small class="form-text text-muted">
                                {{ price_form.end_date.help_text }}
                            </small>
                            {% endif %}
                        </div>
                    </div>
                    {% comment %}
                    <!-- Priority -->
                    {% endcomment %}
                    <div class='form-row my-3'>
                        <div class='col-md-4'>
                            <small>{{ price_form.priority.label_tag }}</small>
                            {{ price_form.priority }}
                            {% if price_form.priority.errors %}
                            {% for error in price_form.priority.errors %}
                            <div style='width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545;'>
                                {{ error }}
                            </div>
                            {% endfor %}
                            {% endif %}

                            {% if price_form.priority.help_text %}
                            <small class="form-text text-muted">
                                {{ price_form.priority.help_text }}
                            </small>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </table>
                <button class="btn btn-primary btn-lg btn-block" type="submit">{% trans 'Save Offer' %}</button>
            </form>
        </div>
    </div>
</div>
{% comment %}
<!-- TODO: remove once offer availiblity finished -->
<!-- This is just reference code for the time being until full offer to profile link has been finished -->
<div class="row">
    <div class='col-6'>
        <div class='card'>
            <div class='card-header'>
                {% trans 'Customers Owning' %}
            </div>
            <div class='card-body'>
                <ul class="list-group">
                    {% for customer_profile in customers_who_own.all %}
                    <li class="list-group-item">{{customer_profile}}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    <div class='col-6'>
        <div class='card'>
            <div class='card-header'>
                {% trans 'Customers Not Owning' %}
            </div>
            <div class='card-body'>
                <div class='dropdown'>
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    {% trans 'Add Customer' %}
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    {% for customer_profile in customers_who_dont_own %}
                    <a class="dropdown-item"
                    href="{% url 'vendor_api:manager-profile-add-offer' customer_profile.uuid form.instance.uuid %}">{{customer_profile}}</a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{% endcomment %}
{% endblock %}

{% block extra_js %}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(".datepicker").datepicker();
    if ($('input[type=radio]:checked').val() == 'free')
    {
        $('#price_select').addClass('d-none');
    }
</script>
<script>
    $('input[type=radio]').change(function() {
    if (this.value == 'not_free') {
        $('#price_select').removeClass('d-none');
    }
    else if (this.value == 'free') {
        $('#price_select').addClass('d-none');
    }
});
</script>
{% endblock %}