{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-appointment-settings" class="btn btn-primary"><i class="fa fa-save"></i> {{ button_save }}</button>
        <a href="{{ cancel }}" class="btn btn-default"><i class="fa fa-reply"></i> {{ button_cancel }}</a>
      </div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
      <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    {% endif %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_appointment_settings_form }}</h3>
      </div>
       <div class="panel-body">
        <form action="{{ action }}" method="post" enctype="multipart/form-data" class="form-horizontal" id="form-appointment-settings">
          <fieldset>
            <legend>{{ text_appointment_status }}</legend>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-pending-color">{{ entry_pending_color }}</label>
              <div class="col-sm-10">
                <div id="pending-color-picker" class="input-group colorpicker-component">
                  <input type="text" value="{{ appointment_status.pending_color }}" class="form-control" id="input-pending-color" name="appointment_status[pending_color]" />
                  <span class="input-group-addon"><i></i></span>
                </div>
                <script>
                  $(function() {
                    $('#pending-color-picker').colorpicker();
                  });
                </script>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-confirm-color">{{ entry_confirm_color }}</label>
              <div class="col-sm-10">
                <div id="confirm-color-picker" class="input-group colorpicker-component">
                  <input type="text" value="{{ appointment_status.confirm_color }}" class="form-control" id="input-confirm-color" name="appointment_status[confirm_color]" />
                  <span class="input-group-addon"><i></i></span>
                </div>
                <script>
                  $(function() {
                    $('#confirm-color-picker').colorpicker();
                  });
                </script>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-canceled-color">{{ entry_canceled_color }}</label>
              <div class="col-sm-10">
                <div id="canceled-color-picker" class="input-group colorpicker-component">
                  <input type="text" value="{{ appointment_status.canceled_color }}" class="form-control" id="input-canceled-color" name="appointment_status[canceled_color]" />
                  <span class="input-group-addon"><i></i></span>
                </div>
                <script>
                  $(function() {
                    $('#canceled-color-picker').colorpicker();
                  });
                </script>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-attended-color">{{ entry_attended_color }}</label>
              <div class="col-sm-10">
                <div id="attended-color-picker" class="input-group colorpicker-component">
                  <input type="text" value="{{ appointment_status.attended_color }}" class="form-control" id="input-attended-color" name="appointment_status[attended_color]" />
                  <span class="input-group-addon"><i></i></span>
                </div>
                <script>
                  $(function() {
                    $('#attended-color-picker').colorpicker();
                  });
                </script>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-draft-color">{{ entry_draft_color }}</label>
              <div class="col-sm-10">
                <div id="draft-color-picker" class="input-group colorpicker-component">
                  <input type="text" value="{{ appointment_status.draft_color }}" class="form-control" id="input-draft-color" name="appointment_status[draft_color]" />
                  <span class="input-group-addon"><i></i></span>
                </div>
                <script>
                  $(function() {
                    $('#draft-color-picker').colorpicker();
                  });
                </script>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend>{{ text_appointment_list_view }}</legend>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-view-type">{{ entry_view_type }}</label>
              <div class="col-sm-10">
                <div class="well well-sm" style="height: 150px; overflow: auto;">
                  {% for view_type in view_types %}
                    <div class="checkbox">
                      <label>
                        {% if view_type.code in list_view_type%}
                          <input type="checkbox" name="list_view_type[]" value="{{ view_type.code }}" checked="checked" />
                          {{ view_type.name }}
{% else %} 
                          <input type="checkbox" name="list_view_type[]" value="{{ view_type.code }}" />
                          {{ view_type.name }}
                        {% endif %}
                      </label>
                    </div>
                  {% endfor %}
                </div>
                {% if error_list_view_type %}
                  <div class="text-danger">{{ error_list_view_type }}</div>
                {% endif %}
              </div>
            </div>
          </fieldset>

          <fieldset>
            <legend>
              {{ text_appointment_booking_preference }}
            </legend>
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-min-day-advance">
                <span data-toggle="tooltip" title="{{ help_min_day_advance }}">
                  {{ entry_min_day_advance }}
                </span>
              </label>
              <div class="col-sm-10">
                <input type="number" value="{{ min_day_advance }}" class="form-control" id="input-min-day-advance" name="min_day_advance" />
              </div>
            </div>
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-allow-duplicate">
                <span data-toggle="tooltip" title="{{ help_allow_duplicate }}">
                  {{ entry_allow_duplicate }}
                </span>
              </label>
              <div class="col-sm-10">
                <div class="well well-sm" style="max-height: 250px; overflow: auto;">
                  {% for service in services %}
                    <div class="checkbox">
                      <label>
                        {% if service.id in allow_duplicate %}
                          <input type="checkbox" name="allow_duplicate[]" value="{{ service.id }}" checked="checked" />
                          {{ service.name }}
{% else %}
                          <input type="checkbox" name="allow_duplicate[]" value="{{ service.id }}" />
                          {{ service.name }}
                        {% endif %}
                      </label>
                    </div>
                  {% endfor %}
                </div>
                {% if error_allow_duplicate %}
                  <div class="text-danger">
                    {{ error_allow_duplicate }}
                  </div>
                {% endif %}
              </div>
            </div>
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-allow-attend-before">
                <span data-toggle="tooltip" title="{{ help_allow_attend_before_date }}">
                  {{ entry_allow_attend_before_date }}
                </span>
              </label>
              <div class="col-sm-10">
                <select name="allow_attend_before_date" id="input-allow-attend-before" class="form-control">
                  <option value="">
                    {{ text_select }}
                  </option>
                  {% if allow_attend_before_date == '1'%}
                    <option value="1" selected="selected">
                      {{ text_yes }}
                    </option>
                    <option value="0">
                      {{ text_no }}
                    </option>
{% elseif allow_attend_before_date == '0'%}
                    <option value="1">
                      {{ text_yes }}
                    </option>
                    <option value="0" selected="selected">
                      {{ text_no }}
                    </option>

{% else %}
                    <option value="1">
                      {{ text_yes }}
                    </option>
                    <option value="0">
                      {{ text_no }}
                    </option>
                  {% endif %}
                </select>
                {% if error_allow_attend_before_date %}
                  <div class="text-danger">
                    {{ error_allow_attend_before_date }}
                  </div>
                {% endif %}
              </div>
            </div>
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-grace-period">
                <span data-toggle="tooltip" title="{{ help_grace_period }}">
                  {{ entry_grace_period }}
                </span>
              </label>
              <div class="col-sm-10">
                <input type="number" value="{{ grace_period }}" class="form-control" id="input-grace-period" name="grace_period" />
              </div>
            </div>
          </fieldset>

          <fieldset>
            <legend>{{ text_create_new_cs }}</legend>
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-create-new-cs-status">{{ entry_create_new_cs_status }}</label>
              <div class="col-sm-10">
                <select name="create_new_cs_status" id="input-create-new-cs-status" class="form-control">
                  <option value="">{{ text_select }}</option>
                  {% if create_new_cs_status == '1'%}
                    <option value="1" selected="selected">{{ text_enabled }}</option>
                    <option value="0">{{ text_disabled }}</option>
{% elseif create_new_cs_status == '0' %}
                    <option value="1">{{ text_enabled }}</option>
                    <option value="0" selected="selected">{{ text_disabled }}</option>

{% else %} 
                    <option value="1">{{ text_enabled }}</option>
                    <option value="0">{{ text_disabled }}</option>
                  {% endif %}
                </select>
                {% if error_create_new_cs_status %}
                  <div class="text-danger">{{ error_create_new_cs_status }}</div>
                {% endif %}
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-create-new-cs-appointment-status"><span data-toggle="tooltip" title="{{ help_create_new_cs_appointment_status }}">{{ entry_create_new_cs_appointment_status }}</span></label>
              <div class="col-sm-10">
                <div class="well well-sm" style="height: 150px; overflow: auto;">
                  {% for status in appointment_statuses %}
                    <div class="checkbox">
                      <label>
                        {% if status.appointment_status_id in create_new_cs_appointment_status %}
                          <input type="checkbox" name="create_new_cs_appointment_status[]" value="{{ status.appointment_status_id }}" checked="checked" />
                          {{ status.name }}
{% else %} 
                          <input type="checkbox" name="create_new_cs_appointment_status[]" value="{{ status.appointment_status_id }}" />
                          {{ status.name }}
                        {% endif %}
                      </label>
                    </div>
                  {% endfor %}
                </div>
                {% if error_create_new_cs_appointment_status %}
                  <div class="text-danger">{{ error_create_new_cs_appointment_status }}</div>
                {% endif %}
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend>{{ text_customer_mapping }}</legend>
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-customer-mapping">{{ entry_customer_mapping_status }}</label>
              <div class="col-sm-10">
                <select name="customer_mapping_status" id="input-customer-mapping" class="form-control">
                  <option value="">{{ text_select }}</option>
                  {% if customer_mapping_status == '1'%}
                    <option value="1" selected="selected">{{ text_enabled }}</option>
                    <option value="0">{{ text_disabled }}</option>
{% elseif customer_mapping_status == '0' %}
                    <option value="1">{{ text_enabled }}</option>
                    <option value="0" selected="selected">{{ text_disabled }}</option>

{% else %} 
                    <option value="1">{{ text_enabled }}</option>
                    <option value="0">{{ text_disabled }}</option>
                  {% endif %}
                </select>
                {% if error_customer_mapping_status %}
                  <div class="text-danger">{{ error_customer_mapping_status }}</div>
                {% endif %}
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-customer-mapping-column">{{ entry_customer_mapping_column }}</label>
              <div class="col-sm-10">
                <select name="customer_mapping_column" id="input-customer-mapping-column" class="form-control">
                  <option value="">{{ text_select }}</option>
                  {% if customer_mapping_column == 'telephone'%}
                    <option value="telephone" selected="selected">{{ text_telephone }}</option>
                    <option value="email">{{ text_email }}</option>
{% elseif customer_mapping_column == '0' %}
                    <option value="telephone">{{ text_telephone }}</option>
                    <option value="email" selected="selected">{{ text_email }}</option>

{% else %} 
                    <option value="telephone">{{ text_telephone }}</option>
                    <option value="email">{{ text_email }}</option>
                  {% endif %}
                </select>
                {% if error_customer_mapping_column %}
                  <div class="text-danger">{{ error_customer_mapping_column }}</div>
                {% endif %}
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>
{{ footer }}