<div class="modal fade" id="form_hardware_profile_modal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div style="max-width: 700px;" class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><%= t("activerecord.models.hardware_profile") %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <%= form_with(model: @hardware_profile, remote: true) do |form| %>
        <div class="field">
          <div class="row">
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <%= form.label :parser_name %>
            </div>
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <%= form.label :port_number %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <% if @hardware_profile.new_record? %>
                <%= form.select :parser_name, get_list_protocols.map {|protocol| [protocol[:name], protocol[:name].downcase, {'data-port' => protocol[:port]}]}, {include_blank: false}, {style: "width: 100%;", id: "hardware_profile_parser_name"} %>
              <% else %>
                <%= @hardware_profile.parser_name.capitalize  %>
              <% end %>
            </div>
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <span class="hardware_profile_port_number"><%= @hardware_profile.port_number %></span>
              <%= form.hidden_field :port_number, id: "hardware_profile_port_number", class: "hardware_profile_port_number_input" %>
            </div>
          </div>
        </div>
        <div class="field">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.label :name %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.text_field :name, id: "hardware_profile_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 :description %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.text_area :description, id: "hardware_profile_description" %>
            </div>
          </div>
        </div>

        <div class="field">
          <div class="row">
            <div class="col-md-4 col-xs-4 col-sm-12 px-7">
              <%= form.label :support_hbm %>
              <%= form.check_box :support_hbm, id: :hardware_profile_support_hbm %>
            </div>
            <div class="col-md-4 col-xs-4 col-sm-12 px-7">
              <%= form.label :support_rpm %>
              <%= form.check_box :support_rpm, id: :hardware_profile_support_rpm %>
            </div>
            <div class="col-md-4 col-xs-4 col-sm-12 px-7">
              <%= form.label :support_adc %>
              <%= form.check_box :support_adc, id: :hardware_profile_support_adc %>
            </div>
          </div>
        </div>

        <div class="field">
          <div class="row">
            <div class="col-md-4 col-xs-4 col-sm-12 px-7">
              <%= form.label :support_temp %>
              <%= form.check_box :support_temp, id: :hardware_profile_support_temp %>
            </div>
          </div>
        </div>

        <div class="field">
          <div class="row">

          </div>
        </div>

        <div class="field">
          <div class="row">

          </div>
        </div>
<!--        <div class="field">-->
<!--          <div class="row">-->
<!--            <div class="col-md-12 col-xs-12 col-sm-12 px-7">-->
              <%#= form.label :ping_support %>
<!--            </div>-->
<!--          </div>-->
<!--          <div class="row">-->
<!--            <div class="col-md-12 col-xs-12 col-sm-12 px-7">-->
              <%#= form.check_box :ping_support, id: "hardware_profile_ping_support" %>
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="field">-->
<!--          <div class="row">-->
<!--            <div class="col-md-12 col-xs-12 col-sm-12 px-7">-->
              <%#= form.label :ping_message %>
<!--            </div>-->
<!--          </div>-->
<!--          <div class="row">-->
<!--            <div class="col-md-12 col-xs-12 col-sm-12 px-7">-->
              <%#= form.text_field :ping_message, id: "hardware_profile_ping_message" %>
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="field">-->
<!--          <div class="row">-->
<!--            <div class="col-md-12 col-xs-12 col-sm-12 px-7">-->
              <%#= form.label :device_commands_messaging %>
<!--            </div>-->
<!--          </div>-->
<!--          <div class="row">-->
<!--            <div class="col-md-12 col-xs-12 col-sm-12 px-7">-->
              <%#= form.text_field :device_commands_messaging, id: "hardware_profile_device_commands_messaging" %>
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="row" style="margin: 0;padding: 0;">
          <div class="col-md-12">
            <hr>
            <h3><%= _("Commands") %></h3>
            <hr>
            <table class="table content-commands">
              <thead>
              <tr>
                <th><%= _("Type") %></th>
                <th><%= _("Name") %></th>
                <th><%= _("Value") %></th>
                <th><%= _("Enable?") %></th>
                <th><%= _("Enable Sms?") %></th>
              </tr>
              </thead>
              <tbody>
              <% if !@hardware_profile.new_record? %>
                <% @hardware_profile.commands.order(:id).each_with_index do |command, idx| %>
                  <tr>
                    <td>
                      <input type='hidden' name='hardware_command[][type]' value='<%= command.type_command %>'>
                      <input type='hidden' name='hardware_command[][id]' value='<%= command.id %>'>
                      <% if command.type_command == "own" %>
                        <button data-id="<%= command.id %>" type="button" class="destroy_command">X</button>
                      <% end %>
                      <%= command.type_command %>

                    </td>
                    <td><input type='text' name='hardware_command[][name]' value='<%= command.name %>'></td>
                    <td>
                      <% if command.type_command == "own" %>
                        <input type='text' name='hardware_command[][value]' value='<%= command.value_command %>'>
                      <% else %>
                        --
                      <% end %>
                    </td>
                    <td><input <%= 'checked' if command.enable %> type='checkbox' name='hardware_command[][enable]'></td>
                    <td><input <%= 'checked' if command.enable_sms %> type='checkbox' name='hardware_command[][enable_sms]'></td>
                  </tr>
                <% end %>
              <% end  %>
              </tbody>
            </table>
            <input type="hidden" id="hardware_command_delete" name="hardware_command_delete" value="">
            <button type="button" class="add_command">Add</button>
          </div>
        </div>

        <div class="row" style="margin: 0;padding: 0;">
          <div class="col-md-12">
            <hr>
            <h3>Events</h3>
            <hr>
            <table class="table content-events">
              <thead>
              <tr>
                <th style="width: 125px;"><%= _("Cod event") %></th>
                <th style="width: 100px;"><%= _("Name") %></th>
                <th style="width: 100px;"><%= _("Type event") %></th>
                <th style="width: 120px;"><%= _("Sound") %></th>
                <th><%= _("Color") %></th>
                <th><%= _("Enable?") %></th>
              </tr>
              </thead>
              <tbody>
              <% if !@hardware_profile.new_record? %>
                <% @hardware_profile.events.order(:id).each_with_index do |event, idx| %>
                  <tr>
                    <td>

                      <input type='hidden' name='hardware_event[][id]' value='<%= event.id %>'>
                      <% if event.own_event %>
                        <input style="width: 80px;" type='text' name='hardware_event[][type]' value='<%= event.type_command %>'  style="width: 90%;">
                        <button data-id="<%= event.id %>" type="button" class="destroy_event">X</button>
                      <% else %>
                        <input type='hidden' name='hardware_event[][type]' value='<%= event.type_command %>'>
                        <%= event.type_command %>
                      <% end %>
                    </td>
                    <td><input type='text' name='hardware_event[][name]' value='<%= event.name %>'></td>
                    <td>
                      <select name='hardware_event[][type_event]'>
                        <%= HardwareEvent::TYPES_EVENT.each do |type_event| %>
                          <option <%= 'selected' if event.type_event == type_event %> value="<%= type_event %>"><%= type_event %></option>
                        <% end %>
                      </select>
                    </td>
                    <td>
                      <select style="width: 80px;" name='hardware_event[][sound]'>
                        <%= @sounds.each do |sound| %>
                          <option <%= 'selected' if event.sound == sound %> value="<%= sound %>"><%= sound %></option>
                        <% end %>
                      </select>
                      <button  type="button" class="play_sound"><i style="font-size: 10pt;" class="icon icon-youtube-play"></i></button>
                    </td>
                    <td>
                      <select name='hardware_event[][color_alert]'>
                        <%= HardwareEvent::COLORS_ALERTS.each do |color_alert| %>
                          <option <%= 'selected' if event.color_alert == color_alert[0] %> value="<%= color_alert[0] %>"><%= color_alert[1] %></option>
                        <% end %>
                      </select>
                    </td>
                    <td>
                      <input <%= 'checked' if event.enable %> type='checkbox' name='hardware_event[][enable]'>
                      <input <%= 'checked' if event.own_event %> type='checkbox' name='hardware_event[][own_event]' style="display: none;">
                    </td>
                  </tr>
                <% end %>
              <% end  %>
              </tbody>
            </table>
            <input type="hidden" id="hardware_event_delete" name="hardware_event_delete" value="">
            <button type="button" class="add_event">Add</button>
          </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();

    function destroyCommand(elm){
        let id_to_delete = $(elm).attr("data-id");
        if(id_to_delete != ""){
            if($("#hardware_command_delete").val() == "")
              $("#hardware_command_delete").val(id_to_delete);
            else
              $("#hardware_command_delete").val($("#hardware_command_delete").val() + "," + id_to_delete);
        }
        $(elm).parent().parent().remove();
    }

    function destroyEvent(elm){
        let id_to_delete = $(elm).attr("data-id");
        if(id_to_delete != ""){
            if($("#hardware_event_delete").val() == "")
                $("#hardware_event_delete").val(id_to_delete);
            else
                $("#hardware_event_delete").val($("#hardware_event_delete").val() + "," + id_to_delete);
        }
        $(elm).parent().parent().remove();
    }

    $('#form_hardware_profile_modal').on("hidden.bs.modal", function () {
        showLoadingImg();
        $.get("<%= hardware_profiles_path %>.js?<%= request.query_parameters.to_query %>", function () {
            hideLoadingImg();
            loadHideColumnSelectorTable();
        });
    });

    $(".btn.btn-send").click(function () {
        showLoadingImg();
    });

    $(".destroy_command").click(function(){
        destroyCommand(this);
    });

    $(".destroy_event").click(function(){
        destroyEvent(this);
    });
    var global_audio = null;
    var prev_play_audio = null;
    $(".play_sound").click(function(){
        if(prev_play_audio == this && global_audio != null){
            global_audio.pause();
            global_audio.currentTime = 0;
            prev_play_audio = null;
            global_audio = null;
        }else{
            prev_play_audio = this;
            if(global_audio != null) {
                global_audio.pause();
                global_audio.currentTime = 0;
            }
            let select = $(this).parent().find("select");
            if(select){
                let sound = $(select).val() + ".mp3";
                global_audio = new Audio('/assets/sounds/' + sound);
                global_audio.play();
                global_audio.onended = function() {
                    prev_play_audio = null;
                    global_audio = null;
                };
            }
        }
    });

    $(".add_command").click(function(){
        $(".content-commands tbody").append(`
          <tr>
              <td>
                  <input type='hidden' name='hardware_command[][type]' value='own'>
                  <button onclick="destroyCommand(this);"' data-id="" type="button" class="destroy_command">X</button>
                  Own
              </td>
              <td><input type='text' name='hardware_command[][name]' value=''></td>
              <td><input type='text' name='hardware_command[][value]' value=''></td>
              <td><input checked type='checkbox' name='hardware_command[][enable]'></td>
              <td><input checked type='checkbox' name='hardware_command[][enable_sms]'></td>
          </tr>\`
        `);
    });

    $(".add_event").click(function(){
        $(".content-events tbody").append(`
          <tr>
              <td>
                  <input style="width: 80px;" type='text' name='hardware_event[][type]' style="width: 90%;">
                  <button onclick="destroyCommand(this);"' data-id="" type="button" class="destroy_command">X</button>
              </td>
              <td><input type='text' name='hardware_event[][name]' value=''></td>
              <td>
                <select name='hardware_event[][type_event]'>
                  <%= HardwareEvent::TYPES_EVENT.each do |type_event| %>
                    <option value="<%= type_event %>"><%= type_event %></option>
                  <% end %>
                </select>
              </td>
              <td>
                <select style="width: 80px;" name='hardware_event[][sound]'>
                  <%= @sounds.each do |sound| %>
                    <option value="<%= sound %>"><%= sound %></option>
                  <% end %>
                </select>
              </td>
              <td>
                <select name='hardware_event[][color_alert]'>
                  <%= HardwareEvent::COLORS_ALERTS.each do |color_alert| %>
                    <option value="<%= color_alert[0] %>"><%= color_alert[1] %></option>
                  <% end %>
                </select>
              </td>
              <td>
                  <input checked type='checkbox' name='hardware_event[][enable]'>
                  <input checked type='checkbox' name='hardware_event[][own_event]' style="display: none;">
              </td>
          </tr>\`
        `);
    });


    <% if @hardware_profile.new_record? %>
      $("#hardware_profile_parser_name").change(function () {
          $(".hardware_profile_port_number_input").val($(this).find("option:selected").attr("data-port"));
          $(".hardware_profile_port_number").html($(this).find("option:selected").attr("data-port"));

          $.ajax({
              url: "<%= ENV["TRACCAR_SERVER_URI"] %>/api/commands/types",
              data: {protocolName: this.value},
              dataType: 'json',
              xhrFields: {
                  withCredentials: true
              },
              success: function (data) {
                  $(".content-commands tbody").html("");
                  for(let i in data){
                      let command = data[i];
                      $(".content-commands tbody").append(`
                          <tr>
                              <td>
                                  <input type='hidden' name='hardware_command[][type]' value='${command["type"]}'>
                                  ${command["type"]}
                              </td>
                              <td><input type='text' name='hardware_command[][name]' value='${command["type"]}'></td>
                              <td>--</td>
                              <td><input checked type='checkbox' name='hardware_command[][enable]'></td>
                              <td><input checked type='checkbox' name='hardware_command[][enable_sms]'></td>
                          </tr>`
                      );
                  }
              }
          });

          $.ajax({
              url: "<%= ENV["TRACCAR_SERVER_URI"] %>/api/events/types",
              data: {protocolName: this.value},
              dataType: 'json',
              xhrFields: {
                  withCredentials: true
              },
              success: function (data) {
                  $(".content-events tbody").html("");
                  for(let i in data){
                      let event = data[i];
                      $(".content-events tbody").append(`
                          <tr>
                              <td>
                                  <input type='hidden' name='hardware_event[][type]' value='${event["type"]}'>
                                  ${event["type"]}
                              </td>
                              <td><input type='text' name='hardware_event[][name]' value='${event["type"]}'></td>
                              <td>
                                <select name='hardware_event[][type_event]'>
                                  <%= HardwareEvent::TYPES_EVENT.each do |type_event| %>
                                    <option value="<%= type_event %>"><%= type_event %></option>
                                  <% end %>
                                </select>
                              </td>
                              <td>
                                <select name='hardware_event[][sound]'>
                                  <%= @sounds.each do |sound| %>
                                    <option value="<%= sound %>"><%= sound %></option>
                                  <% end %>
                                </select>
                              </td>
                              <td>
                                <select name='hardware_event[][color_alert]'>
                                  <%= HardwareEvent::COLORS_ALERTS.each do |color_alert| %>
                                    <option value="<%= color_alert[0] %>"><%= color_alert[1] %></option>
                                  <% end %>
                                </select>
                              </td>
                              <td>
                                <input checked type='checkbox' name='hardware_event[][enable]'>
                                <input checked type='checkbox' name='hardware_event[][own_event]' style="display: none;>
                              </td>
                          </tr>`
                      );
                  }
              }
          });

      });
      $("#hardware_profile_parser_name").change();

    <% end %>
</script>
