{{define "content"}}
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Settings</h4>
            </div>
            <div class="card-body">
              <form onsubmit="updateSettings(); return false;">
                <div class="row">
                  <div class="col-md-2 pr-1">
                    <div class="form-group">
                      <label>Prefix (Max len. 8)</label>
                      <input name="prefix" type="text" class="form-control" placeholder="t!" id="prefix">
                    </div>
                  </div>

                  <div class="col-md-1 px-1">
                    <div class="form-group">
                      <label>Ticket Limit (1-10)</label>
                      <input name="ticketlimit" type="text" class="form-control" placeholder="5" id="ticket_limit">
                    </div>
                  </div>

                  <div class="col-md-2 px-1">
                    <div class="form-group">
                      <label>Ping @everyone on ticket open</label>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="pingeveryone" value="on" id="ping_everyone" style="width:30px;height:30px;">
                      </div>
                    </div>
                  </div>

                  <div class="col-md-2 px-1">
                    <div class="form-group">
                      <label>Allow users to close tickets</label>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="userscanclose" value="on"
                               id="users_can_close" style="width:30px;height:30px;">
                      </div>
                    </div>
                  </div>

                  <div class="col-md-2 px-1">
                    <div class="form-group">
                      <label>Ticket close confirmation</label>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="close_confirmation" value="on"
                               id="close_confirmation" style="width:30px;height:30px;">
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-12">
                    <label>Welcome Message (Max len. 1000)</label>
                    <textarea name="welcomeMessage" class="form-control" rows="3" id="welcome_message"></textarea>
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-4 pr-1">
                    <label>Archive Channel</label>
                    <div class="input-group mb-3">
                      <div class="input-group-prepend">
                        <div class="input-group-text">#</div>
                      </div>
                      <select class="form-control" name="archive_channel" id="archive_channel">
                      </select>
                    </div>
                  </div>

                  <div class="col-md-4 px-1">
                    <div class="form-group">
                      <label>Channel Category</label>
                      <select class="form-control" name="category" id="category">
                      </select>
                    </div>
                  </div>
                </div>

                <label>Ticket Naming Scheme</label>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="namingscheme" id="naming-by-id" value="id">
                  <label class="form-check-label white" for="naming-by-id">
                    Ticket ID (#ticket-1)
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="namingscheme" id="naming-by-username"
                         value="username">
                  <label class="form-check-label white" for="naming-by-username">
                    Username (#ryan-1)
                  </label>
                </div>

                <div class="row">
                  <div class="col-md-2 pr-1">
                    <div class="form-group">
                      <button class="btn btn-primary btn-fill" type="submit"><i class="fas fa-paper-plane"></i>
                        Submit
                      </button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

      <!-- Claim settings -->
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Claim Settings</h4>
            </div>
            <div class="card-body">
              <form onsubmit="updateClaimSettings(); return false;">
                <div class="row">
                  <div class="col-md-2 pr-1">
                    <div class="form-group">
                      <label>Support Reps Can View Claimed Tickets</label>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="can_view" value="on" id="can_view" style="width:30px;height:30px;" onclick="canViewChanged();">
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2 pr-1">
                    <div class="form-group">
                      <label>Support Reps Can Type In Claimed Tickets</label>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="can_type" value="on" id="can_type" style="width:30px;height:30px;">
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row" style="padding-top: 20px">
                  <div class="col-md-2 pr-1">
                    <div class="form-group">
                      <button class="btn btn-primary btn-fill" type="submit"><i class="fas fa-paper-plane"></i>
                        Submit
                      </button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div aria-live="polite" aria-atomic="true" style="position: relative;">
      <div style="position: absolute; right: 10px" id="toast-container">
      </div>
    </div>

    <script>
        async function getSettings() {
            const res = await axios.get('/api/{{.guildId}}/settings');
            return res.data;
        }

        async function getChannels() {
            const res = await axios.get('/api/{{.guildId}}/channels');
            return res.data;
        }

        async function fillArchiveChannels(channels, archiveChannelId) {
            const container = document.getElementById('archive_channel');
            channels.filter((ch) => ch.type === 0).forEach((ch) => {
                const node = document.createElement("option");
                const text = document.createTextNode(ch.name);
                node.appendChild(text);

                node.value = ch.id;
                if (archiveChannelId === ch.id) {
                    node.selected = true;
                }


                container.appendChild(node);
            });
        }

        async function fillCategories(channels, categoryId) {
            const container = document.getElementById('category');
            channels.filter((ch) => ch.type === 4).forEach((ch) => {
                const node = document.createElement("option");
                const text = document.createTextNode(ch.name);
                node.appendChild(text);

                node.value = ch.id;
                if (categoryId === ch.id) {
                    node.selected = true;
                }

                container.appendChild(node);
            });
        }

        async function loadData() {
            const settings = await getSettings();
            document.getElementById("prefix").value = settings.prefix;
            document.getElementById("welcome_message").value = settings.welcome_message;
            document.getElementById("ticket_limit").value = settings.ticket_limit;
            document.getElementById("ping_everyone").checked = settings.ping_everyone;
            document.getElementById("users_can_close").checked = settings.users_can_close;
            document.getElementById("close_confirmation").checked = settings.close_confirmation;

            if (settings.naming_scheme === "username") {
                document.getElementById("naming-by-username").checked = true;
            } else {
                document.getElementById("naming-by-id").checked = true;
            }

            const channels = await getChannels();
            await fillArchiveChannels(channels, settings.archive_channel);
            await fillCategories(channels, settings.category);
        }

        loadData();
    </script>

    <script>
        async function getClaimSettings() {
            const res = await axios.get('/api/{{.guildId}}/claimsettings');
            return res.data;
        }

        async function loadClaimSettings() {
            const settings = await getClaimSettings();
            document.getElementById('can_view').checked = settings.support_can_view;
            document.getElementById('can_type').checked = settings.support_can_type;
        }

        loadClaimSettings();

        async function updateClaimSettings() {
            const data = {
                support_can_view: document.getElementById('can_view').checked,
                support_can_type: document.getElementById('can_type').checked
            };

            const res = await axios.post('/api/{{.guildId}}/claimsettings', data);
            if (res.status === 200 && res.data.success) {
                showToast("Success", "Your settings have been saved.");
            } else {
                showToast("Error", res.data.error);
            }
        }

        function canViewChanged() {
            const isChecked = document.getElementById('can_view').checked;
            if (isChecked) {
                document.getElementById('can_type').disabled = false;
            } else {
                document.getElementById('can_type').disabled = true;
                document.getElementById('can_type').checked = false;
            }
        }
    </script>

    <script>
        async function updateSettings() {
            const data = {
                'prefix': document.getElementById('prefix').value,
                'welcome_message': document.getElementById("welcome_message").value,
                'ticket_limit': parseInt(document.getElementById('ticket_limit').value),
                'ping_everyone': document.getElementById("ping_everyone").checked,
                'users_can_close': document.getElementById("users_can_close").checked,
                'close_confirmation': document.getElementById("close_confirmation").checked,
                'naming_scheme': document.querySelector('input[name="namingscheme"]:checked').value,
                'archive_channel': document.getElementById('archive_channel').options[document.getElementById('archive_channel').selectedIndex].value,
                'category': document.getElementById('category').options[document.getElementById('category').selectedIndex].value
            };

            const res = await axios.post('/api/{{.guildId}}/settings', data);
            if (res.status === 200) {
                const success = showValidations(res.data);
                if (success) {
                    showToast("Success", "Your settings have been saved.");
                }
            } else {
                showToast("Error", "A severe error occurred. Please check your console for more information.");
                console.log(res);
            }
        }

        function showValidations(data) {
            let success = true;

            if (!data.prefix) {
                success = false;
                showToast("Warning", "Your prefix has not been saved.<br />Prefixes must be between 1 - 8 characters in length.")
            }

            if (!data.welcome_message) {
                success = false;
                showToast("Warning", "Your welcome message has not been saved.<br />Welcome messages must be between 1 - 1000 characters in length.")
            }

            if (!data.ticket_limit) {
                success = false;
                showToast("Warning", "Your ticket limit has not been saved.<br />Ticket limits must be in the range 1 - 10.")
            }

            if (!data.archive_channel) {
                success = false;
                showToast("Warning", "Your archive channel has not been saved.")
            }

            if (!data.category) {
                success = false;
                showToast("Warning", "Your channel category has not been saved.")
            }

            if (!data.naming_scheme) {
                success = false;
                showToast("Warning", "Your archive channel has not been saved.")
            }

            return success;
        }
    </script>
  </div>
{{end}}