<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      metal:use-macro="here/main_template/macros/master"
      i18n:domain="senaite.core">

  <head>
    <metal:block fill-slot="senaite_legacy_resources"
                 tal:define="portal context/@@plone_portal_state/portal;">
      <script type="text/javascript"
              tal:attributes="src python:portal.absolute_url() + '/senaite_widgets/datetimewidget.js'"></script>
      <script type="text/javascript"
              tal:attributes="src python:portal.absolute_url() + '/senaite_widgets/referencewidget.js'"></script>
      <script type="text/javascript"
              tal:attributes="src python:portal.absolute_url() + '/bika_widgets/rejectionwidget.js'"></script>
      <link rel="stylesheet" type="text/css" media="all" href=""
            tal:attributes="href string:${portal/absolute_url}/senaite_widgets/referencewidget.css"/>
      <!-- AR Add form -->
      <script type="text/javascript"
              src="handlebars.js"
              tal:attributes="src string:${portal/absolute_url}/++plone++senaite.core.static/thirdparty/handlebars.min-v4.7.2.js"></script>

      <script type="text/javascript"
              src="bika.lims.analysisrequest.add.js"
              tal:attributes="src string:${portal/absolute_url}/++plone++senaite.core.static/js/bika.lims.analysisrequest.add.js"></script>
      <link rel="stylesheet" type="text/css" media="all" href=""
            tal:attributes="href string:${portal/absolute_url}/++plone++senaite.core.static/css/bika.lims.analysisrequest.add.css"/>

      <!-- Handlebars JS Templates -->

      <!-- Add dependent services popup -->
      <script id="dependency-add-template" type="text/x-handlebars-template">
        <div title="Service dependencies" i18n:attributes="title">
          {{#with service}}
          <p i18n:translate="">{{title}} requires the following services to be selected:</p>
          {{/with}}
          <div class="dialog-dependencies dialog-listing">
            {{#each dependencies}}
            <div class="dialog-dependency">
              <span>{{title}}</span>
            </div>
            {{/each}}
          </div>
          <p i18n:translate="">Do you want to apply these services now?</p>
        </div>
      </script>

      <!-- Dependant services popup -->
      <script id="service-dependant-template" type="text/x-handlebars-template">
        <div title="Service locked" i18n:attributes="title">
          {{#with service}}
          <p i18n:translate="">{{title}} cannot be deselected, because it is included in:</p>
          {{/with}}
          <div class="dialog-dependants dialog-listing">
            {{#if profiles}}
              <dl class="service-profile-dependants">
                <dt i18n:translate="">Analysis Profiles</dt>
                {{#each profiles}}
                <dd>{{title}}</dd>
                {{/each}}
              </dl>
            {{/if}}
            {{#if templates}}
              <dl class="service-template-dependants">
                <dt i18n:translate="">AR Templates</dt>
                {{#each templates}}
                <dd>{{title}}</dd>
                {{/each}}
              </dl>
            {{/if}}
          </div>
          <p i18n:translate="">Please deselect these dependants first.</p>
        </div>
      </script>

      <!-- Remove dependent services popup -->
      <script id="template-remove-template" type="text/x-handlebars-template">
        <div title="Remove Template" i18n:attributes="title">
          <p i18n:translate="">Do you also want to remove the templates services?</p>
          <div class="dialog-profile-services dialog-listing">
            {{#each services}}
            <div class="dialog-profile-service">
              <span>{{title}}</span>
            </div>
            {{/each}}
          </div>
        </div>
      </script>

      <!-- Remove Profile popup -->
      <script id="profile-remove-template" type="text/x-handlebars-template">
        <div title="Remove Profile" i18n:attributes="title">
          <p i18n:translate="">Do you also want to remove the profiles services?</p>
          <div class="dialog-profile-services dialog-listing">
            {{#each services}}
            <div class="dialog-profile-service">
              <span>{{title}}</span>
            </div>
            {{/each}}
          </div>
        </div>
      </script>

      <!-- Service Info Template -->
      <script id="service-info" type="text/x-handlebars-template">
        <table class="service-info-table table table-condensed table-bordered">
          <tr>
            <td class="service-info-key"
                i18n:translate="">Analysis Service</td>
            <td class="service-info-value">
              {{#if accredited}}
              <img title="Accredited Service"
                   i18n:attributes="title"
                   class="service-info-accredited-image"
                   tal:attributes="src senaite_theme/icon_url/accredited">
              {{/if}}
              {{title}}
            </td>
          </tr>
          {{#if unit}}
          <tr>
            <td class="service-info-key"
                i18n:translate="">Unit</td>
            <td class="service-info-value">
              {{unit}}
            </td>
          </tr>
          {{/if}}
          <tr>
            <td class="service-info-key"
                i18n:translate="">Price</td>
            <td class="service-info-value">
              {{currency_symbol}} {{price}}
            </td>
          </tr>
          {{#if methods}}
          <tr>
            <td class="service-info-key"
                i18n:translate="">Methods</td>
            <td class="service-info-value">
              <ul class="service-methods">
                {{#each methods}}
                <li>{{title}}</li>
                {{/each}}
              </ul>
            </td>
          </tr>
          {{/if}}
          {{#if dependencies}}
          <tr>
            <td class="service-info-key"
                i18n:translate="">Dependencies</td>
            <td class="service-info-value">
              <ul class="service-dependency">
                {{#each dependencies}}
                <li>{{title}}</li>
                {{/each}}
              </ul>
            </td>
          </tr>
          {{/if}}
          {{#if dependendants}}
          <tr>
            <td class="service-info-key"
                i18n:translate="">Dependants</td>
            <td class="service-info-value">
              <ul class="service-dependency">
                {{#each dependendants}}
                <li>{{title}}</li>
                {{/each}}
              </ul>
            </td>
          </tr>
          {{/if}}
          {{#if profiles}}
          <tr>
            <td class="service-info-key"
                i18n:translate="">Analysis Profiles</td>
            <td class="service-info-value">
              <ul class="service-profiles">
                {{#each profiles}}
                <li>{{title}}</li>
                {{/each}}
              </ul>
            </td>
          </tr>
          {{/if}}
          {{#if templates}}
          <tr>
            <td class="service-info-key"
                i18n:translate="">AR Templates</td>
            <td class="service-info-value">
              <ul class="service-templates">
                {{#each templates}}
                <li>{{title}}</li>
                {{/each}}
              </ul>
            </td>
          </tr>
          {{/if}}
          {{#if specifications}}
          <tr>
            <td class="service-info-key"
                i18n:translate="">Specification</td>
            <td class="service-info-value">
              <ul class="service-specs">
                {{#each specifications}}
                <li>{{title}}</li>
                {{/each}}
              </ul>
            </td>
          </tr>
          {{/if}}
        </table>
      </script>

      <!-- Confirmation Template -->
      <script id="confirm-template" type="text/x-handlebars-template">
        <div title="Confirm" i18n:attributes="title">
          {{#if message}}
          <p i18n:translate="">
            {{message}}
          </p>
          {{/if}}
          {{#if html_message}}
          {{{html_message}}}
          {{/if}}
          <p i18n:translate="">
            Do you want to continue?
          </p>
        </div>
      </script>

      <!-- Service Conditions template -->
      <script id="service-conditions" type="text/x-handlebars-template">
        <div data-fieldname="ServiceConditions-{{arnum}}">
        <table class="service-conditions-table table table-condensed table-bordered">
          {{#each conditions}}
          <tr data-subfield="{{title}}">
            <td class="service-conditions-label">
              <label class="formQuestion">
                <span class="">{{{title}}}</span>
                {{#if required}}
                <span class="fieldRequired"
                      i18n:attributes="title title_required;"
                      title="Required">&nbsp;</span>
                {{/if}}
                <span class="formHelp discreet help-block small"
                      id="ServiceConditions-{{arnum}}_help">{{{description}}}</span>
              </label>
            </td>
            <td class="service-conditions-value">
              <input type='hidden'
                     name="ServiceConditions-{{../arnum}}.uid:records"
                     value="{{../uid}}"/>
              <input type="hidden"
                     name="ServiceConditions-{{../arnum}}.title:records"
                     value="{{title}}"/>
              <input type="hidden"
                     name="ServiceConditions-{{../arnum}}.type:records"
                     value="{{type}}"/>
              <input type="hidden"
                     name="ServiceConditions-{{../arnum}}.required:records"
                     value="{{required}}"/>
              <input type="hidden"
                     name="ServiceConditions-{{../arnum}}.choices:records"
                     value="{{choices}}"/>
              <input type="hidden"
                     name="ServiceConditions-{{../arnum}}.description:records"
                     value="{{description}}"/>
              {{#if options}}
              <select name="ServiceConditions-{{../arnum}}.value:records">
                {{#unless required}}
                <option></option>
                {{/unless}}
                {{#each options}}
                <option>{{this}}</option>
                {{/each}}
              </select>
              {{else}}
              {{#if required}}
              <input type="{{type}}"
                     name="ServiceConditions-{{../arnum}}.value:records"
                     required="required"
                     value="{{default}}"/>
              {{else}}
              <input type="{{type}}"
                     name="ServiceConditions-{{../arnum}}.value:records"
                     value="{{default}}"/>
              {{/if}}
              {{/if}}
            </td>
          </tr>
          {{/each}}
        </table>
        </div>
      </script>

    </metal:block>
  </head>

  <body>

    <metal:title fill-slot="content-title">

      <h1 id="ar-header">
        <img src="#"
             class="d-inline-block align-middle"
             width="32"
             tal:attributes="src senaite_theme/icon_url/sample"/>

        <span class="d-inline-block align-middle" i18n:translate="">Request new analyses</span>

        <span tal:condition="python:checkPermission('senaite.core: Add AnalysisRequest', context)"
              class="d-inline-block align-middle ml-2">
          <form method="GET"
                class="form-inline"
                action="ar_add"
                tal:attributes="action string:${context/absolute_url}/ar_add">
            <input type="hidden"
                   name="copy_from" tal:attributes="value request/copy_from|nothing"/>
            <span class="input-group">
              <input type="number"
                     name="ar_count"
                     min="1"
                     max="99"
                     class="form-control form-control-sm"
                     tal:attributes="value python:view.ar_count or 1"/>
              <span class="input-group-append">
                <button type="submit"
                        class="btn btn-outline-secondary btn-sm">
                  <img src="#"
                       height="16"
                       tal:attributes="src senaite_theme/icon_url/plus"/>
                  <span tal:omit-tag="python:1" i18n:translate="">Add</span>
                </button>
              </span>
            </span>
          </form>
        </span>
      </h1>


    </metal:title>
    <metal:description fill-slot="content-description">
    </metal:description>

    <div metal:fill-slot="content-core"
         tal:define="portal context/@@plone_portal_state/portal;
                     user context/portal_membership/getAuthenticatedMember;
                     currency_symbol python:view.get_currency().symbol;">

      <form id="analysisrequest_add_form"
            name="analysisrequest_add_form"
            method="POST">

        <input type="hidden" name="submitted" value="1"/>
        <input type="hidden" name="portal_url" value="" tal:attributes="value portal/absolute_url"/>
        <span tal:replace="structure context/@@authenticator/authenticator"/>
        <input type="hidden"
               name="came_from" tal:attributes="value view/came_from"/>
        <input type="hidden" id="ar_count" name="ar_count"
               tal:attributes="value view/ar_count"/>

        <!-- ADD Form -->
        <table class="ar-table grid table table-sm table-condensed table-bordered">

          <tr>
            <td>
              <div id="manage-ar-fields"
                  tal:condition="python:user.has_role('LabManager') or user.has_role('Manager')">
                <a id="manage-ar-fields-link"
                  href=""
                  class="btn btn-link"
                  target="_blank"
                  tal:attributes="href python:context.absolute_url() + '/ar_add_manage'">
                  &#9998;
                  <span i18n:translate="">Manage Form Fields</span>
                </a>
              </div>
            </td>
            <td></td>
            <tal:columns tal:repeat="arnum python:range(view.ar_count)">
              <td class="ar-column-header">
                <span i18n:translate="">Sample</span>
                <span tal:content="python: arnum + 1"></span>
              </td>
            </tal:columns>
          </tr>

          <!-- All edit fields with fields with add=visible -->
          <tal:field tal:repeat="field python:view.get_fields_with_visibility('edit')">
            <tal:def define="fieldName python:field.getName();
                             required python:bool(field.required);
                             widget python:field.widget;
                             errors python:{};
                             mode python:'edit';">
              <tr tal:attributes="fieldName python:fieldName;">
                <td>
                  <label class="formQuestion">
                    <span
                      tal:attributes="class python:required and 'text-primary' or ''"
                      tal:content="python:view.context.translate(widget.Label(here))">
                      Label
                    </span>
                    <span class="fieldRequired"
                          tal:condition="required"
                          title="Required"
                          i18n:attributes="title title_required;">&nbsp;</span>
                    <span class="formHelp discreet help-block small"
                          tal:define="description python:view.context.translate(widget.Description(here))"
                          tal:content="structure description"
                          tal:attributes="id string:${fieldName}_help">Help</span>
                  </label>
                </td>
                <td>
                  <!-- Copy Button -->
                  <img class="copybutton btn-link"
                       width="16"
                       tal:condition="python:view.ar_count > 1"
                       tal:attributes="src senaite_theme/icon_url/copy;"/>
                </td>

                <tal:columns tal:repeat="arnum python:range(view.ar_count)">
                  <td tal:define="newFieldName python:view.get_fieldname(field, arnum)"
                      tal:attributes="arnum arnum; fieldName newFieldName">
                    <!-- The input field is rendered here -->
                    <metal:field use-macro="python:view.get_input_widget(fieldName, arnum, mode='edit')"/>
                  </td>
                </tal:columns>

              </tr>
            </tal:def>
          </tal:field>

          <!-- Hidden Fields -->
          <tal:field tal:repeat="field python:view.get_fields_with_visibility('hidden')">
            <tal:def define="fieldName python:field.getName();">
              <tr style="display:none" tal:attributes="fieldName fieldName">
                <tal:columns tal:repeat="arnum python:range(view.ar_count)">
                  <td tal:define="newFieldName python:view.get_fieldname(field, arnum);
                                  val python:view.fieldvalues.get(newFieldName)"
                      tal:attributes="arnum python:arnum; fieldName python:newFieldName">

                    <input type="hidden"
                           tal:attributes="value val/Title|nothing;
                                           name newFieldName;"/>
                    <input type="hidden"
                           tal:attributes="value val/UID|nothing;
                                           name python:'{}_uid'.format(newFieldName);"/>
                  </td>
                </tal:columns>
              </tr>
            </tal:def>
          </tal:field>

          <!-- POCs (Field/Lab) -->
          <tal:poc tal:repeat="poc python:view.get_points_of_capture()">
            <!-- Services in POC -->
            <tal:services_in_poc tal:define="services python:view.get_services(poc);
                                             categories python:view.get_service_categories();
                                             ar_count python:view.ar_count;"
                                 tal:condition="python:any(services.values())">

              <tr tal:attributes="poc poc;
                                  data-poc poc;
                                  class string:${poc} service-listing-header field-services-header">
                <td tal:attributes="colspan python:2 + ar_count">
                  <div class="poc-service-title">
                    <span tal:condition="python:poc=='field'"
                          i18n:translate="">
                      Field Analyses
                    </span>
                    <span tal:condition="python:poc=='lab'"
                          i18n:translate="">
                      Lab Analyses
                    </span>
                  </div>
                </td>
              </tr>

              <tal:categories tal:repeat="category categories;">
                <tal:category tal:condition="python:services[category_title]"
                              tal:define="category_id python:category.getId;
                                          category_title python:category.Title;">
                  <tr title="Click to expand this category"
                      i18n:attributes="title"
                      tal:attributes="data-category python:category_id;
                                      poc python:poc;
                                      category python:'field';
                                      class python:'{} category'.format(poc);">
                    <td class="services-category-header">
                      <span class="services-category-title"
                            tal:content="category_title"
                            i18n:translate="">
                        Category Title
                      </span>
                    </td>
                    <td>
                      <button tal:attributes="data-category category_id"
                              class="btn btn-default btn-xs service-category-toggle">+</button>
                    </td>
                    <!-- span over all sample columns -->
                    <td tal:attributes="colspan python:ar_count"></td>
                  </tr>

                  <tal:services tal:repeat="service python:services[category_title];">
                    <tr tal:define="service_uid python:service.UID;
                                    service_id python:service.getId;
                                    service_keyword python:service.getKeyword;
                                    service_title python:service.Title;"
                        tal:attributes="id python:service_id;
                                        class python:'{} {} service'.format(category_id, poc);
                                        poc python:poc;
                                        fieldname python:'Analyses';">
                      <td class="service-header">
                        <div class="service-title small"
                             i18n:translate=""
                             tal:content="service_title">
                          Service Title
                        </div>
                      </td>
                      <td>
                        <img class="copybutton btn-link"
                             width="16"
                             tal:condition="python:view.ar_count > 1"
                             tal:attributes="src python:senaite_theme.icon_url('copy');"/>
                      </td>

                      <tal:columns tal:repeat="arnum python:range(ar_count)">
                        <td tal:define="fieldname python:'Analyses-{}'.format(arnum);
                                        analyses python:view.fieldvalues.get(fieldname) or [];
                                        service_uids python:map(view.get_service_uid_from, analyses);
                                        checked python:service_uid in service_uids;"
                            tal:attributes="fieldname python:'Analyses-{}'.format(arnum);
                                            uid python:service_uid;
                                            class python:'{}-column service-column'.format(service_uid);
                                            arnum python:arnum;">

                          <!-- Service locked button -->
                          <div tal:attributes="uid python:service_uid;
                                               arnum python:arnum;
                                               id python:'{}-{}-lockbtn'.format(service_uid, arnum);
                                               class python:'service-lockbtn {}-lockbtn'.format(service_uid);"
                               title="Service cannot be deselected. Please click the info button for further details"
                               i18n:attributes="title">
                            &#128274;
                          </div>

                          <!-- Service checkbox -->
                          <div tal:attributes="id python:'{}-{}-analysisservice'.format(service_uid, arnum);
                                               class python:'analysisservice {}-analysisservice'.format(service_uid);">
                            <input type="checkbox"
                                   style="height:auto;"
                                   tal:attributes="name python:'{}:list'.format(fieldname);
                                                   value python:service_uid;
                                                   class python:'analysisservice-cb analysisservice-cb-{}'.format(arnum);
                                                   id python:'cb_{}_{}'.format(arnum, service_uid);
                                                   alt python:service_title;
                                                   checked python:checked and 'checked' or '';"/>
                          </div>

                          <!-- Service info button -->
                          <div tal:attributes="uid python:service_uid;
                                               arnum python:arnum;
                                               id python:'{}-infobtn'.format(service_uid);
                                               class python:'service-infobtn {}-infobtn'.format(service_uid);">
                            &#9432;
                          </div>

                          <!-- Service Info Box -->
                          <div tal:attributes="id python:'{}-info'.format(service_uid);
                                               class python:'{}-info service-info'.format(service_uid);">
                          </div>

                          <!-- Service conditions -->
                          <div tal:attributes="id python:'{}-conditions'.format(service_uid);
                                               class python:'{}-conditions service-conditions'.format(service_uid);">
                          </div>

                        </td>
                      </tal:columns>
                    </tr>
                  </tal:services>
                </tal:category>
              </tal:categories>
            </tal:services_in_poc>
            <!-- /Services in POC -->
          </tal:poc>
          <!-- /POCs -->

          <!-- Prices -->
          <tal:prices tal:condition="python:view.ShowPrices">
            <tr tal:condition="python:view.getMemberDiscountApplies()">
              <td>
                <span class="pricelabel discount" i18n:translate="">Discount</span>
                <span class="discreet">(<tal:i content="python:context.bika_setup.getMemberDiscount()"/>%)</span>
              </td>
              <td>
                <span tal:replace="currency_symbol"/>
              </td>
              <tal:columns repeat="arnum python:range(view.ar_count)">
                <td tal:attributes="arnum python:arnum">
                  <span class="price discount noborder"
                        tal:attributes="id python:'discount-{}'.format(arnum)">0.00</span>
                </td>
              </tal:columns>
            </tr>
            <tr>
              <td>
                <span class="pricelabel subtotal" i18n:translate="">Subtotal</span>
              </td>
              <td>
                <span tal:replace="currency_symbol"/>
              </td>
              <tal:columns repeat="arnum python:range(view.ar_count)">
                <td tal:attributes="arnum python:arnum">
                  <span class="price subtotal noborder"
                        tal:attributes="id python:'subtotal-{}'.format(arnum)">0.00</span>
                </td>
              </tal:columns>
            </tr>
            <tr>
              <td>
                <span class="pricelabel vat" i18n:translate="">VAT</span>
              </td>
              <td>
                <span tal:replace="currency_symbol"/>
              </td>
              <tal:columns repeat="arnum python:range(view.ar_count)">
                <td tal:attributes="arnum arnum">
                  <span class="price vat noborder"
                        tal:attributes="id python:'vat-{}'.format(arnum)">0.00</span>
                </td>
              </tal:columns>
            </tr>
            <tr>
              <td>
                <span class="pricelabel total" i18n:translate="">Total</span>
              </td>
              <td>
                <span tal:replace="currency_symbol"/>
              </td>
              <tal:columns repeat="arnum python:range(view.ar_count)">
                <td tal:attributes="arnum arnum">
                  <span class="price total noborder"
                        tal:attributes="id python:'total-{}'.format(arnum)">0.00</span>
                </td>
              </tal:columns>
            </tr>
          </tal:prices>

        </table>

        <input class="btn btn-success btn-sm allowMultiSubmit"
               type="submit"
               name="save_button"
               i18n:attributes="value"
               value="Save"/>

        <input type="hidden" id="confirmed" name="confirmed" value="0"/>

      </form>
      <!-- /ADD Form -->

      <div class="ar-footer"></div>

    </div>
  </body>
</html>
