<template>
       <b-form @submit="onSubmit">
    <b-row align-h="center">
            <b-col col cols="12" lg="4">
                <b-card bg-variant="dark" text-variant="white" header="Device">
                    <b-form-group>
                        <label for="deviceID">
                            <i class="fa fa-id-card"></i>
                            Device ID
                        </label>
                        <b-form-input v-model="formData.deviceId" size="sm" id="deviceID" type="number" required v-onlyNumeric></b-form-input>
                    </b-form-group>

                    <b-form-group>
                        <label for="soundCard">
                            <i class="fa fa-microchip"></i>
                            Sound card
                        </label>
                        <b-form-select size="sm" id="soundCard" v-model="formData.soundCard" :options="soundCardOptions"></b-form-select>
                    </b-form-group>

                    <b-form-group>
                        <label for="serviceUrl">
                            <i class="fa fa-link"></i>
                            Service URL
                        </label>
                        <b-form-input size="sm" id="serviceUrl" v-model="formData.serviceUrl" v-onlyUrl required></b-form-input>
                    </b-form-group>

                    <b-form-group>
                        <label for="downloadUrl">
                            <i class="fa fa-link"></i>
                            Download URL
                        </label>
                        <b-form-input size="sm" id="downloadUrl" v-model="formData.downloadUrl" required></b-form-input>
                    </b-form-group>

                    <b-form-group>
                        <label for="disableWebServer">
                            <i class="fa fa-server"></i>
                            Disable web server
                        </label>
                        <b-form-select size="sm" id="disableWebServer" v-model="formData.disableWebServer" :options="disableWebServerOptions"></b-form-select>
                    </b-form-group>
                </b-card>
            </b-col>

            <b-col col cols="12" lg="4">
                <b-card bg-variant="secondary" text-variant="white" header="Multi output">
                    <b-form-group>
                        <label for="multiOutputEnable">
                            <i class="fa fa-plug"></i>
                            Enable
                        </label>
                        <b-form-select size="sm" id="multiOutputEnable" v-model="formData.multiOutput.isEnabled" :options="multiOutputEnableOptions"></b-form-select>
                    </b-form-group>

                    <b-form-group>
                        <label for="multiOutputChannel">
                            <i class="fa fa-volume-off"></i>
                            Channel
                        </label>
                        <b-form-select size="sm" id="multiOutputChannel" v-model="formData.multiOutput.channel"  :options="multiOutputChannelOptions" :disabled="!formData.multiOutput.isEnabled"></b-form-select>
                    </b-form-group>
                </b-card>
            </b-col>

            <b-col col cols="12" lg="4" >
            <b-card bg-variant="light" header="Proxy">
                    <b-form-group>
                        <label for="proxyEnable">
                            <i class="fa fa-plug"></i>
                            Enable
                        </label>
                        <b-form-select size="sm" id="proxyEnable" v-model="formData.proxy.enable" :options="proxyEnableOptions"></b-form-select>
                    </b-form-group>

                    <b-form-group>
                        <label for="proxyHost">
                            <i class="fa fa-server"></i>
                            Host
                        </label>
                        <b-form-input size="sm" id="proxyHost" v-model="formData.proxy.host" :disabled="!formData.proxy.enable" required></b-form-input>
                    </b-form-group>
                    
                    <b-form-group>
                        <label for="proxyPort">
                            <i class="fa fa-circle"></i>
                            Port
                        </label>
                        <b-form-input size="sm" id="proxtPort" v-model="formData.proxy.port" type="number" :disabled="!formData.proxy.enable" required v-onlyNumeric></b-form-input>
                    </b-form-group>

                    <b-form-group>
                        <label for="proxyUser">
                            <i class="fa fa-user"></i>
                            Username
                        </label>
                        <b-form-input size="sm" id="proxyUser" v-model="formData.proxy.username" :disabled="!formData.proxy.enable" required></b-form-input>
                    </b-form-group>

                    <b-form-group>
                        <label for="proxyUser">
                            <i class="fa fa-key"></i>
                            Password
                        </label>
                        <b-form-input size="sm" id="proxyPassword" v-model="formData.proxy.password" :disabled="!formData.proxy.enable" required></b-form-input>
                    </b-form-group>

                </b-card>
            </b-col>

            <b-col cols="12" class="mt-10">
                <b-button variant="success" type="submit" class="pull-right"><i class="fa fa-save"></i> Save</b-button>
            </b-col>
    </b-row>
       </b-form>
</template>

<script>
export default {
  name: "Config",

  data() {
    return {
      soundCardOptions: [
        { value: 1, text: "First sound card" },
        { value: 2, text: "Usb sound card" }
      ],
      disableWebServerOptions: [
        { value: 1, text: "Disable" },
        { value: 0, text: "Enable" }
      ],
      multiOutputEnableOptions: [
        { value: true, text: "Enable" },
        { value: false, text: "Disable" }
      ],
      multiOutputChannelOptions: [
        { value: 1, text: "Front" },
        { value: 2, text: "Rear" },
        { value: 3, text: "Center LFE" },
        { value: 4, text: "Rear-2" },
        { value: 5, text: "Left" },
        { value: 6, text: "Right" },
        { value: 7, text: "Front Left" },
        { value: 8, text: "Front Right" },
        { value: 9, text: "Rear Left" },
        { value: 10, text: "Rear Right" },
        { value: 11, text: "Center" },
        { value: 12, text: "LFE" },
        { value: 13, text: "Rear-2 Left" },
        { value: 14, text: "Rear-2 Right" }
      ],
      proxyEnableOptions: [
        { value: true, text: "Enable" },
        { value: false, text: "Disable" }
      ],
      formData: {
        deviceId: "7787",
        soundCard: 1,
        serviceUrl: "http://newmanager.smg.com.tr/smgpush",
        downloadUrl: "http://cdn.smg.com.tr/",
        disableWebServer: 0,
        proxy: {
          enable: false,
          host: "",
          port: "",
          username: "",
          password: ""
        },
        multiOutput: {
          isEnabled: false,
          channel: 1
        }
      }
    };
  },

  directives: {
    onlyNumeric: {
      bind(el) {
        el.addEventListener("keydown", () => {
          if (!/^[0-9]*$/.test(el.value)) {
            el.value = el.value.slice(0, -1);
          }
        });
      }
    }
  },

  methods: {
    getData() {},

    validUrl(url) {
      return /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/.test(
        url
      );
    },

    onSubmit(event) {}
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/sass/variables";

.card {
  margin-bottom: 15px;

  .card-header {
    font-weight: bold;
  }

  .card-body {
    label {
      font-size: 14px;
      i.fa {
        color: #ffa500;
      }
    }
  }
}
</style>


