%div{id: key}
  .person-form
    .row
      .col-12= form.select :person_type, enum_values_for_select(person.class, :person_type), {}, class: 'person-type-toggle'
    .natural-person-row.identification-form.natural_person.row
      .col-12
        .card
          .card-header Ztotožnění fyzické osoby
          .card-body
            .form
              .form-group
                = label_tag 'firstname', 'Jméno'
                = text_field_tag :firstname, {}, class: 'form-control'
              .form-group
                = label_tag 'lastname', 'Příjmení'
                = text_field_tag :lastname, {}, class: 'form-control'
              .form-group
                = label_tag 'birth_date', 'Datum narození'
                = date_field_tag :birth_date, {}, class: 'form-control'
              = link_to 'Vyhledat', {}, class: 'btn btn-primary'
    .legal-person-row.identification-form.legal_person.row
      .col-12
        .card
          .card-header Ztotožnění právnické osoby
          .card-body
            .form
              .form-group
                = label_tag 'ico', 'IČO'
                = text_field_tag :ico, {}, class: 'form-control'
              = link_to 'Vyhledat', nil, class: 'btn btn-primary'
    = form.hidden_field :remote_id

:javascript
  var key = "#{key}";
  $('body').on('click', `\#${key} .natural-person-row a`, function(e) {
    e.preventDefault();
    $this = $(this);
    $npr = $this.closest('.natural-person-row');

    form_data = {
      firstname: $npr.find('input[name=firstname]').val(),
      lastname: $npr.find('input[name=lastname]').val(),
      birth_date: $npr.find('input[name=birth_date]').val(),
      birth_place: $npr.find('input[name=birth_place]').val()
    }

    $.ajax({
      url: '/internals/iszr/search',
      data: {
        search: form_data
      },
      type: 'POST',
      dataType: 'json',
      success: function(data) {
        $this.closest('.card-body').find('.alert').remove();

        $icon = $('<i>').addClass('fa').addClass('fa-check');
        $success_div = $('<div>').addClass('alert').addClass('alert-success').append($icon).append(` Ztotožněno: <b>${data.firstname} ${data.lastname}</b> (narozen ${new Date(Date.parse(data.birth_date)).toLocaleDateString()}, ${data.birth_place})`);
        $npr.find('.card-body .form').hide();
        $npr.find('.card-body').prepend($success_div);
        $this.closest('.person-form').find("input[name*='[remote_id]']").val(data.remote_id);
      },
      error: function(xhr) {
        $this.closest('.card-body').find('.alert').remove();

        data = xhr.responseJSON;
        error_kind = data.base ? data.base[0].error : 'not_found';

        if(error_kind == 'not_found') {
          $icon = $('<i>').addClass('fa').addClass('fa-times');
          $error_div = $('<div>').addClass('alert').addClass('alert-danger').append($icon).append(' Dle zadaných údajů nebyla nalezena žádná osoba, pokračujte, prosím, ručním zadáním údajů');

          $new_person_form = $this.closest('.new-person-form');
          $old_person_form = $new_person_form.siblings('.old-person-form');

          $old_person_form.prepend($error_div);
          $new_person_form.addClass('hidden').hide();
          $old_person_form.removeClass('hidden').show();

          eGovUtilities.initPeople($old_person_form);

          // Fill in the form with the data
          $old_person_form.find("input[name*='[firstname]']").val(form_data.firstname);
          $old_person_form.find("input[name*='[lastname]']").val(form_data.lastname);
          $old_person_form.find("input[name*='[birth_place]']").val(form_data.birth_place);
          $old_person_form.find("input[name*='[birth_date]']").val(form_data.birth_date);
        }
        else if(error_kind == 'multiple_results_found') {
          $form_group = $('<div>').addClass('form-group');
          $label = $('<label>').attr('for', 'birth_place').text('Místo narození');
          $input = $('<input>').attr('type', 'text').attr('name', 'birth_place').addClass('form-control');
          $form_group.append($label).append($input);
          $npr.find('.card-body .form .btn').before($form_group);

          $icon = $('<i>').addClass('fa').addClass('fa-times');
          $error_div = $('<div>').addClass('alert').addClass('alert-danger').append($icon).append(' Nalezeno více osob, zadejte místo narození');
          $npr.find('.card-body').prepend($error_div);
        }
        else if(error_kind == 'extended_search_multiple_records_found') {
          $icon = $('<i>').addClass('fa').addClass('fa-times');
          $error_div = $('<div>').addClass('alert').addClass('alert-danger').append($icon).append(' Nalezeno více osob, pokračujte, prosím, ručním zadáním údajů');

          $('.old-person-form').prepend($error_div);
          $('.new-person-form').addClass('hidden').hide();
          $('.old-person-form').removeClass('hidden').show();
          eGovUtilities.initPeople($('.old-person-form'));

          // Fill in the form with the data
          $('.old-person-form').find("input[name*='[firstname]']").val(form_data.firstname);
          $('.old-person-form').find("input[name*='[lastname]']").val(form_data.lastname);
          $('.old-person-form').find("input[name*='[birth_place]']").val(form_data.birth_place);
          $('.old-person-form').find("input[name*='[birth_date]']").val(form_data.birth_date);
        }
      }
    });
  });
  $('body').on('click', '.legal-person-row a', function(e) {
    e.preventDefault();
    $this = $(this);
    $lpr = $this.closest('.legal-person-row');
    $.ajax({
      url: '/internals/iszr/search',
      data: { search: { ico: $lpr.find('input[name=ico]').val() } },
      type: 'POST',
      dataType: 'json',
      success: function(data) {
        $this.closest('.card-body').find('.alert').remove();

        $icon = $('<i>').addClass('fa').addClass('fa-check');
        $success_div = $('<div>').addClass('alert').addClass('alert-success').append($icon).append(` Ztotožněno: <b>${data.name}</b> (IČO: ${data.ico})`);
        $lpr.find('.card-body .form').hide();
        $lpr.find('.card-body').prepend($success_div);
        $this.closest('.person-form').find("input[name*='[remote_id]']").val(data.remote_id);
      },
      error: function(data) {
        $this.closest('.card-body').find('.alert').remove();

        $icon = $('<i>').addClass('fa').addClass('fa-times');
        $error_div = $('<div>').addClass('alert').addClass('alert-danger').append($icon).append(' Nenalezeno');
        $lpr.find('.card-body').prepend($error_div);
      }
    });
  });