
<div class="modal fade" id="form_client_modal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><%= t("activerecord.models.client") %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <%= form_with(model: @client, remote: true) do |form| %>
        <ul class="nav nav-tabs" id="myTab" role="tablist">

          <li class="nav-item">
            <a class="nav-link btn fuse-ripple-ready active show" id="general-tab" data-toggle="tab" href="#general-tab-pane" role="tab" aria-controls="general-tab-pane" aria-expanded="true" aria-selected="true"><%= _("General") %></a>
          </li>

          <li class="nav-item">
            <a class="nav-link btn fuse-ripple-ready" id="announcement-tab" data-toggle="tab" href="#announcement-tab-pane" role="tab" aria-controls="announcement-tab-pane" aria-selected="false"><%= _("Announcement") %></a>
          </li>

        </ul>

        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade p-6" id="general-tab-pane" aria-labelledby="general-tab">
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :client_name %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_field :client_name, id: "client_client_name"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.label :first_name %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.label :last_name %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.text_field :first_name, id: "client_first_name"  %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.text_field :last_name, id: "client_last_name"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :address %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_field :address, id: "client_address"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :address_2 %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_field :address_2, id: "client_address_2"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.label :city %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.label :state %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.text_field :city, id: "client_city"  %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.text_field :state, id: "client_state"  %>
                </div>
              </div>
            </div>

            <div class="field">
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.label :zip_code %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.label :country_id %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.text_field :zip_code, id: "client_code"  %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.select :country_id, Country.all.order("name").map{|c| [c.name, c.id]}, {}, {id: "client_country_id", style: "width: 100%;"}  %>
                </div>
              </div>
            </div>

            <div class="field">
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.label :activation_date %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.label :deactivation_date %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.text_field :activation_date, id: "client_activation_date", type: "date"  %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.text_field :deactivation_date, id: "client_deactivation_date", type: "date"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :website %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_field :website, id: "client_website"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :email_address %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_field :email_address, id: "client_email_address"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :phone %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_field :phone, id: "client_phone"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :fax %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_field :fax, id: "client_fax"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :client_type_id %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.select :client_type_id, ClientType.all.order("name").map{|client_type| [client_type.name, client_type.id]}, {}, {style: "width: 100%;", id: "client_client_type_id"}  %>
                </div>
              </div>
            </div>
          </div>

          <div role="tabpanel" class="tab-pane fade p-6" id="announcement-tab-pane" aria-labelledby="announcement-tab">
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :announcement %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_area :announcement, id: "client_announcement"  %>
                  <script>
                      CKEDITOR.replace($("#client_announcement")[0]);
                  </script>
                </div>
              </div>
            </div>
          </div>
        </div>
      <div class="row form-errors">
        <div class="col-md-12 col-xs-12 col-sm-12 px-7">
          <ul></ul>
        </div>
      </div>
      <div class="modal-footer">
        <%= render "shared/loading" %>
        <button type="button" class="btn-filter btn btn-light btn-sm fuse-ripple-ready" data-dismiss="modal"><%= t("utils.cancel_button") %></button>
        <button type="submit" class="btn btn-sm btn-send"><%= t("utils.send_button") %></button>
      </div>
      <% end %>
    </div>
  </div>
</div>
<script>
    hideLoadingImg();

    $('#form_client_modal').on("hidden.bs.modal", function () {
        showLoadingImg();
        $.get("<%= clients_path %>.js?<%= request.query_parameters.to_query %>", function(){
            hideLoadingImg();
            loadHideColumnSelectorTable();
        });
    });

    $(".btn.btn-send").click(function(){
        showLoadingImg();
    });

    setTimeout("$('.nav.nav-tabs .nav-item:last-child a:last-child').click();$('.nav.nav-tabs .nav-item:first-child a:first-child').click();", 300);
</script>

<style>
  .modal-dialog{
    width: 700px;
    max-width: 700px;
  }
</style>
