{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-end">
        <a href="{{ back }}" title="{{ button_back }}" class="btn btn-light"><i class="fa-solid fa-reply"></i></a>
      </div>
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">
    <div class="card mb-3">
      <div class="card-header"><i class="fa-solid fa-info-circle"></i> {{ text_form }}</div>
      <div class="card-body">
        <div class="row">
          {% if order_id %}
            <div class="col mb-3">
              <div class="form-control p-0 border rounded" style="min-height: 64px;">
                <div class="lead p-2"><strong>{{ text_order_id }}</strong>
                  <br/>
                  <a href="{{ order_edit }}" target="_blank">{{ order_id }}</a>
                </div>
              </div>
            </div>
          {% endif %}
          <div class="col mb-3">
            <form id="form-customer" class="form-floating">
              <input type="text" value="{{ firstname }} {{ lastname }}" placeholder="{{ entry_customer }}" id="input-customer" data-oc-target="autocomplete-customer" class="form-control form-control-lg" autocomplete="off"/>
              <label for="input-customer">{{ entry_customer }}</label>
              <ul id="autocomplete-customer" class="dropdown-menu"></ul>
              <input type="hidden" name="customer_id" value="{{ customer_id }}" id="input-customer-id"/>
              <input type="hidden" name="customer_group_id" value="{{ customer_group_id }}" id="input-customer-group"/>
            </form>
          </div>
          <div class="col mb-3">
            <div class="form-control p-0 border rounded" style="min-height: 64px;">
              <div class="lead p-2"><strong>{{ text_date_added }}</strong>
                <br/>
                {{ date_added }}
              </div>
            </div>
          </div>
        </div>
        <div class="row row-cols-1 row-cols-sm-1 row-cols-md-3 row-cols-xl-3">
          <div class="col mb-3">
            <div class="form-floating">
              <select id="input-store" class="form-select">
                {% for store in stores %}
                  <option value="{{ store.store_id }}"{% if store.store_id == store_id %} selected{% endif %}>{{ store.name }}</option>
                {% endfor %}
              </select>
              <label for="input-store">{{ entry_store }}</label>
            </div>
          </div>
          <div class="col mb-3">
            <div class="form-floating">
              <select id="input-language" class="form-select">
                {% for language in languages %}
                  <option value="{{ language.code }}"{% if language.code == language_code %} selected{% endif %}>{{ language.name }}</option>
                {% endfor %}
              </select>
              <label for="input-language">{{ entry_language }}</label>
            </div>
          </div>
          <div class="col">
            <div class="form-floating">
              <select id="input-currency" class="form-select">
                {% for currency in currencies %}
                  <option value="{{ currency.code }}"{% if currency.code == currency_code %} selected{% endif %}>{{ currency.title }}</option>
                {% endfor %}
              </select>
              <label for="input-currency">{{ entry_currency }}</label>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col mb-3">
            <form id="form-subscription-plan" class="form-floating">
              <select name="subscription_plan_id" id="input-subscription-plan" class="form-select">
                <option value="0" selected>{{ text_none }}</option>
                {% for subscription_plan in subscription_plans %}
                  <option value="{{ subscription_plan.subscription_plan_id }}"{% if subscription_plan.subscription_plan_id == subscription_plan_id %} selected{% endif %}>{{ subscription_plan.name }}</option>
                {% endfor %}
              </select>
              <label for="input-subscription-plan">{{ entry_subscription_plan }}</label>
            </form>
          </div>
        </div>
        <form id="form-cart">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>{{ column_product }}</th>
                <th class="text-end">{{ column_quantity }}</th>
                <th class="text-end">{{ column_price }}</th>
                <th class="text-end">{{ column_total }}</th>
                <th class="text-end" style="width: 1px;">{{ column_action }}</th>
              </tr>
            </thead>
            <tbody id="subscription-product">
              {% set subscription_product_row = 0 %}
              {% if subscription_products %}
                {% for subscription_product in subscription_products %}
                  <tr>
                    <td><a href="{{ subscription_product.product_edit }}" target="_blank">{{ subscription_product.name }}</a>
                      <div id="error-product-{{ subscription_product_row }}-product" class="invalid-feedback mt-0"></div>
                      <ul class="list-unstyled mb-0">
                        <li>
                          <small> - {{ text_model }}: {{ subscription_product.model }}</small>
                        </li>
                        {% for option in subscription_product.option %}
                          {% if option.type != 'file' %}
                            <li>
                              <small> - {{ option.name }}: {{ option.value }}</small>
                              <div id="error-product-{{ subscription_product_row }}-option-{{ option.product_option_id }}" class="invalid-feedback mt-0"></div>
                            </li>
                          {% else %}
                            <li>
                              <small> - {{ option.name }}: <a href="{{ option.href }}">{{ option.filename }}</a></small>
                              <div id="error-product-{{ subscription_product_row }}-option-{{ option.product_option_id }}" class="invalid-feedback mt-0"></div>
                            </li>
                          {% endif %}
                        {% endfor %}
                      </ul>
                      <input type="hidden" name="product[{{ subscription_product_row }}][product_id]" value="{{ subscription_product.product_id }}"/>
                      <input type="hidden" name="product[{{ subscription_product_row }}][quantity]" value="{{ subscription_product.quantity }}"/>
                      {% for option in subscription_product.option %}
                        {% if option.type == 'select' or option.type == 'radio' %}
                          <input type="hidden" name="product[{{ subscription_product_row }}][option][{{ option.product_option_id }}]" value="{{ option.product_option_value_id }}"/>
                        {% endif %}
                        {% if option.type == 'checkbox' %}
                          <input type="hidden" name="product[{{ subscription_product_row }}][option][{{ option.product_option_id }}][]" value="{{ option.product_option_value_id }}"/>
                        {% endif %}
                        {% if option.type == 'text' or option.type == 'textarea' or option.type == 'file' or option.type == 'date' or option.type == 'datetime' or option.type == 'time' %}
                          <input type="hidden" name="product[{{ subscription_product_row }}][option][{{ option.product_option_id }}]" value="{{ option.value }}"/>
                        {% endif %}
                      {% endfor %}
                      <input type="hidden" name="product[{{ subscription_product_row }}][subscription_plan_id]" value="{{ subscription_plan_id }}"/>
                    </td>
                    <td class="text-end">{{ subscription_product.quantity }}</td>
                    <td class="text-end"><x-currency code="{{ currency }}" amount="{{ subscription_product.trial_price }}"></x-currency></td>
                    <td class="text-end"><x-currency code="{{ currency }}" amount="{{ subscription_product.price }}"></x-currency></td>
                    <td class="text-end"><button type="button" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                  </tr>
                  {% set subscription_product_row = subscription_product_row + 1 %}
                {% endfor %}
              {% else %}
                <tr>
                  <td colspan="5" class="text-center">{{ text_no_results }}</td>
                </tr>
              {% endif %}
            </tbody>
            <tfoot>
              <tr>
                <td colspan="4"></td>
                <td class="text-end"><button type="button" data-bs-toggle="modal" data-bs-target="#modal-product" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>
              </tr>
            </tfoot>
          </table>
        </form>
        <div class="row row-cols-2">
          <div class="col">
            <form id="form-subscription-plan" class="form-floating">
              <input type="date" name="date_next" value="{{ date_next }}" placeholder="{{ entry_date_next }}" id="input-date-next" class="form-control form-control-lg"/>
              <label for="input-date-next">{{ entry_date_next }}</label>
            </form>
            <div id="error-date-next" class="invalid-feedback"></div>
          </div>
          <div class="col">
            <div class="form-control p-0 border rounded mb-3" style="min-height: 64px;">
              <div class="lead p-2"><strong>{{ text_remaining }}</strong>
                <br/>
                {{ remaining }}
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col mb-3">
            <form id="form-payment-address" class="form-floating">
              <select name="payment_address_id" id="input-payment-address" class="form-select">
                <option value="0" selected>{{ text_none }}</option>
                {% for address in addresses %}
                  <option value="{{ address.address_id }}"{% if address.address_id == payment_address_id %} selected{% endif %}>{{ address.firstname }} {{ address.lastname }},{% if address.company %} {{ address.company }},{% endif %} {{ address.address_1 }}, {{ address.city }}, {{ address.country }}</option>
                {% endfor %}
              </select>
              <label for="input-payment-address">{{ entry_payment_address }}</label>
            </form>
          </div>
          <div id="shipping-address" class="col mb-3{% if not shipping_method_code %} d-none{% endif %}">
            <form id="form-shipping-address" class="form-floating">
              <select name="shipping_address_id" id="input-shipping-address" class="form-select">
                <option value="0" selected>{{ text_none }}</option>
                {% for address in addresses %}
                  <option value="{{ address.address_id }}"{% if address.address_id == shipping_address_id %} selected{% endif %}>{{ address.firstname }} {{ address.lastname }},{% if address.company %} {{ address.company }},{% endif %} {{ address.address_1 }}, {{ address.city }}, {{ address.country }}</option>
                {% endfor %}
              </select>
              <label for="input-shipping-address">{{ entry_shipping_address }}</label>
            </form>
          </div>
        </div>
        <div class="row">
          <div id="shipping-method" class="col-md mb-3{% if not shipping_method_code %} d-none{% endif %}">
            <div class="input-group">
              <div class="form-control border rounded-start" style="min-height: 64px;">
                <div class="lead"><strong>{{ text_shipping_method }}</strong>
                  <br/>
                  <div id="output-shipping-method">{{ shipping_method_name }}</div>
                </div>
              </div>
              <button type="button" id="button-shipping-methods" class="btn btn-outline-primary"><i class="fa-solid fa-cog"></i></button>
            </div>
          </div>
          <div id="payment-method" class="col-md mb-3">
            <div class="input-group">
              <div class="form-control border rounded-start" style="min-height: 64px;">
                <div class="lead"><strong>{{ text_payment_method }}</strong>
                  <br/>
                  <div id="output-payment-method">{{ payment_method_name }}</div>
                </div>
              </div>
              <button type="button" id="button-payment-methods" class="btn btn-outline-primary"><i class="fa-solid fa-cog"></i></button>
            </div>
          </div>
        </div>
        <div class="row mb-3">
          <div class="col">
            <form id="form-comment" class="form-floating">
              <textarea name="comment" rows="10" placeholder="{{ entry_comment }}" id="input-comment" class="form-control" style="min-height: 100px;">{{ comment }}</textarea>
              <label for="input-comment">{{ entry_comment }}</label>
            </form>
          </div>
        </div>
        <div class="text-end">
          <button type="button" id="button-refresh" title="{{ button_refresh }}" class="btn btn-outline-primary"><i class="fa-solid fa-rotate"></i></button>
          <button type="button" id="button-confirm" class="btn btn-primary"><i class="fa-solid fa-check"></i> {{ button_confirm }}</button>
        </div>
        <input type="hidden" name="subscription_id" value="{{ subscription_id }}" id="input-subscription-id"/>
      </div>
    </div>
    <div class="card">
      <div class="card-header"><i class="fa-solid fa-list"></i> {{ text_history }}</div>
      <div class="card-body">
        <ul class="nav nav-tabs">
          <li class="nav-item"><a href="#tab-history" data-bs-toggle="tab" class="nav-link active">{{ tab_history }}</a></li>
          <li class="nav-item"><a href="#tab-order" data-bs-toggle="tab" class="nav-link">{{ tab_order }}</a></li>
          <li class="nav-item"><a href="#tab-log" data-bs-toggle="tab" class="nav-link">{{ tab_log }}</a></li>
          {% for tab in tabs %}
            <li class="nav-item"><a href="#tab-{{ tab.code }}" data-bs-toggle="tab" class="nav-link">{{ tab.title }}</a></li>
          {% endfor %}
        </ul>
        <div class="tab-content">
          <div id="tab-history" class="tab-pane active">
            <fieldset>
              <legend>{{ text_history }}</legend>
              <div id="history">{{ history }}</div>
            </fieldset>
            <form id="form-history">
              <fieldset>
                <legend>{{ text_history_add }}</legend>
                <div class="row mb-3">
                  <label for="input-subscription-status" class="col-sm-2 col-form-label">{{ entry_subscription_status }}</label>
                  <div class="col-sm-10">
                    <select name="subscription_status_id" id="input-subscription-status" class="form-select">
                      {% for subscription_status in subscription_statuses %}
                        <option value="{{ subscription_status.subscription_status_id }}"{% if subscription_status.subscription_status_id == subscription_status_id %} selected{% endif %}>{{ subscription_status.name }}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <div class="row mb-3">
                  <label class="col-sm-2 col-form-label">{{ entry_notify }}</label>
                  <div class="col-sm-10">
                    <x-switch name="notify" value="1" checked="{{ notify }}" input-id="input-notify" input-class="form-switch form-switch-lg"></x-switch>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-comment" class="col-sm-2 col-form-label">{{ entry_comment }}</label>
                  <div class="col-sm-10">
                    <textarea name="comment" rows="8" placeholder="{{ entry_comment }}" id="input-history" class="form-control"></textarea>
                  </div>
                </div>
                <div class="text-end">
                  <button type="submit" id="button-history" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i> {{ button_history_add }}</button>
                </div>
              </fieldset>
            </form>
          </div>
          <div id="tab-order" class="tab-pane">
            <fieldset>
              <legend>{{ text_order }}</legend>
              <div id="order">{{ orders }}</div>
            </fieldset>
          </div>
          <div id="tab-log" class="tab-pane">
            <fieldset>
              <legend>{{ text_log }}</legend>
              <div id="log">{{ log }}</div>
            </fieldset>
          </div>
          {% for tab in tabs %}
            <div id="tab-{{ tab.code }}" class="tab-pane">{{ tab.content }}</div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

<div id="modal-product" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ text_product_add }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="form-product-add">
          <div class="mb-3">
            <label for="input-product" class="form-label">{{ entry_product }}</label>
            <input type="text" value="" id="input-product" placeholder="{{ entry_product }}" data-oc-target="autocomplete-product" class="form-control"/>
            <ul id="autocomplete-product" class="dropdown-menu"></ul>
            <input type="hidden" name="product_id" value="" id="input-product-id"/>
          </div>
          <div class="mb-3">
            <label for="input-quantity" class="form-label">{{ entry_quantity }}</label>
            <input type="text" name="quantity" value="1" id="input-quantity" placeholder="{{ entry_quantity }}" class="form-control"/>
          </div>
          <div id="option"></div>
          <div class="text-end">
            <button type="submit" id="button-product-add" class="btn btn-primary"><i class="fa-solid fa-check"></i> {{ button_continue }}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div id="modal-shipping-method" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fa fa-truck"></i> {{ text_shipping_method }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>{{ text_shipping }}</p>
        <div id="shipping-methods"></div>
        <form id="form-shipping-method">
          <input type="hidden" name="shipping_method[name]" value="{{ shipping_method_name }}" id="input-shipping-method-name"/>
          <input type="hidden" name="shipping_method[code]" value="{{ shipping_method_code }}" id="input-shipping-method-code"/>
          <input type="hidden" name="shipping_method[cost]" value="{{ shipping_method_cost }}" id="input-shipping-method-cost"/>
          <input type="hidden" name="shipping_method[tax_class_id]" value="{{ shipping_method_tax_class_id }}" id="input-shipping-method-tax-class"/>
          <div class="text-end">
            <button type="submit" id="button-shipping-method" class="btn btn-primary"><i class="fa-solid fa-check"></i> {{ button_continue }}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div id="modal-payment-method" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fa fa-credit-card"></i> {{ text_payment_method }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>{{ text_payment }}</p>
        <div id="payment-methods"></div>
        <form id="form-payment-method">
          <input type="hidden" name="payment_method[name]" value="{{ payment_method_name }}" id="input-payment-method-name"/>
          <input type="hidden" name="payment_method[code]" value="{{ payment_method_code }}" id="input-payment-method-code"/>
          <div class="text-end">
            <button type="submit" id="button-payment-method" class="btn btn-primary">{{ button_continue }}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="view/javascript/subscription.js"></script>
{{ footer }}
