= render "renalware/shared/errors", model: slot

= simple_form_for(slot,
                  url: hd_diary_slots_path(slot.diary.id),
                  html: { id: "slot-form", autocomplete: "off" },
                  remote: true,
                  method: :post,
                  wrapper: :horizontal_form) do |f|

  = f.input :station_id, as: :hidden
  = f.input :diurnal_period_code_id, as: :hidden
  = f.input :day_of_week, as: :hidden

  .row
    .col-small-4
      = f.input :change_type,
                input_html: { id: :change_type },
                collection: slot.patient_search_options,
                include_blank: false,
                label: "Search"
    .col-small-8

      / We will post 3 patient_id values in hd_diary_slot[patient_id][]
      / The value selected in in change_type above will determine which one to choose.
      #patient_select2s
        #dialysing_on_day_and_period
          = f.input :patient_id,
                   collection: slot.patients_preferring_to_dialyse_today_in_this_period,
                   label_method: :text,
                   value_method: :id,
                   input_html: { class: "searchable_select patient-id-select2",
                                 id: "patient_id1",
                                 name: "hd_diary_slot[patient_id][]" }

        #dialysing_on_day(style="display:none")
          = f.input :patient_id,
                   collection: slot.patients_preferring_to_dialyse_today,
                   label_method: :text,
                   value_method: :id,
                   input_html: { class: "searchable_select patient-id-select2",
                                 id: "patient_id2",
                                 name: "hd_diary_slot[patient_id][]" }
        #dialysing_at_unit(style="display:none")
          = f.input :patient_id,
                    collection: [],
                    input_html: { \
                      class: "patient-id-select2 patient-ajax-search",
                      name: "hd_diary_slot[patient_id][]",
                      data: { "ajax--url" => hd_patients_dialysing_at_unit_path(unit_id: slot.diary.hospital_unit_id, format: :json),
                              placeholder: "Search by patient name or NHS/hosp no." } \
                    }

        #dialysing_at_hospital(style="display:none")
          = f.input :patient_id,
                    collection: [],
                    input_html: { \
                      class: "patient-id-select2 patient-ajax-search",
                      name: "hd_diary_slot[patient_id][]",
                      data: { "ajax--url" => hd_patients_dialysing_at_hospital_path(format: :json),
                              placeholder: "Search by patient name or NHS/hosp no." } \
                    }
  = f.submit "Add for this week only", class: "button save weekly"
  |  
  = f.submit "Add to this and all future weeks", class: "button secondary master", name: "master"

  = blank_separator
  = link_to "Cancel",
           "#",
           "aria-label" => "Close",
           class: "reveal-modal-close"

javascript:
  $(document).ready(function() {

    // 1. add handler for button if master set action
    $('input.master[type=submit]').click(function (e) {
      var master_slots_url = $(".diary").data("master-diary-slots-path");
      $("#slot-form").attr('action', master_slots_url);
    });

    $('input.weekly[type=submit]').click(function (e) {
      var weekly_slots_url = $(".diary").data("weekly-diary-slots-path");
      $("#slot-form").attr('action', weekly_slots_url);
    });

    refreshSelect2s("#{slot.change_type}");

    function resizeSelect2ToFitModalWidth(container) {
      $('.select2', container).css('width', "100%");
      $('#tabs').on('tabsactivate', function(event, ui) {
        $('.select2').css('width', "100%");
      });
    }

    function refreshSelect2s(change_type) {
      if (change_type == '') return;
      // Hide any showing patient select2's then display just the one corresponding to
      // what was selected in change_type. The value in the change_type option
      // will exist as an html id, wrapping the patient select2s
      var container = $("#patient_select2s")
      $("#patient_select2s > div").hide();
      $("#patient_select2s > #" + change_type).show();
      $("#patient_select2s .patient-id-select2").val("").trigger('change');
      resizeSelect2ToFitModalWidth(container);
    }

    $("#change_type").on("change", function() {
      change_type = $(this).val(); // e.g. "dialysing_at_unit"
      refreshSelect2s(change_type);
    })
  });