{% extends 'bom/bom-base.html' %}

{% load materializecss %}
{% load staticfiles %}

{% block head-title %}{{ title }}{% endblock %}

{% block main %}
    <link rel="stylesheet" type="text/css" href="{% static 'bom/style.css' %}"/>
{% endblock %}

{% block content %}

    <div class="row container-app">
        <div class="col s12">
            <ul id="tabs" class="tabs tabs-fixed-width">
                <li class="tab"><a href="#user">User</a></li>
                <li class="tab"><a href="#indabom">IndaBOM</a></li>
                <li class="tab"><a href="#organization">Organization</a></li>
            </ul>
        </div>

        <div id="user" class="col s12">
            <h3>Your IndaBOM User Info:</h3>
            <form name="seller" action="{% url 'bom:settings' tab_anchor=USER_TAB %}" method="post" class="col s12">
                {% csrf_token %}
                <div class="row">
                    <div class="col s12">
                        <p>Your role is: <b>{{ user.bom_profile.get_role_display }}</b></p>
                        <p>Your username is: <b>{{ user.username }}</b></p>
                        <p>To request a change in role please contact <a href="mailto:{{ organization.owner.email }}">{{ organization.owner.email }}</a> for assistance.</p>
                    </div>
                </div>
                <div class="row">
                    {{ user_form.first_name|materializecss:'s12 m4' }}
                    {{ user_form.last_name|materializecss:'s12 m4' }}
                    {{ user_form.email|materializecss:'s12 m4' }}
                </div>
                <div class="row">
                    <div class="col s6">
                        <a type="button" class="waves-effect waves-light btn grey lighten-1" href="{% url 'bom:settings' tab_anchor=USER_TAB %}">Refresh</a>
                    </div>
                    <div class="col s6 right-align">
                        <button class="waves-effect waves-light btn green lighten-1" type="submit" name="submit-edit-user">Save</button>
                    </div>
                </div>
            </form>
        </div>

        <div id="indabom" class="col s12">
            {% if profile.role == 'A' %}
                <h3>Edit Part Classes</h3>
                <form name="seller" action="{% url 'bom:settings' tab_anchor=INDABOM_TAB %}" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row" style="margin-bottom: 0;">
                        <div class="input-field col s10 m4">
                            <select name="part-class-action">
                                <option value="" disabled selected>Choose your action</option>
                                <option value="submit-part-class-enable-mouser">Enable Mouser</option>
                                <option value="submit-part-class-disable-mouser">Disable Mouser</option>
                                <option value="submit-part-class-delete">Delete</option>
                            </select>
                            <label>Action</label>
                        </div>
                        <div class="col s2 m2">
                            <div class="input-field">
                                <button class="waves-effect waves-light btn green lighten-1" type="submit">Go</button>
                            </div>
                        </div>
                    </div>
                    {% if part_classes.count > 0 %}
                        <table class="striped tight">
                            <thead>
                            <tr>
                                <th class="text-normal"><label><input type="checkbox" id="part-class-select-all"><span></span></label></th>
                                <th class="text-normal">Code</th>
                                <th class="text-normal">Name</th>
                                <th class="text-normal">Description</th>
                                <th class="text-normal"><img height="18" style="padding: 4px 4px 0 4px;" alt="Mouser" title="Via Mouser.com" src="{% static 'bom/img/mouser.png' %}">Mouser Sourcing
                                </th>
                                <th class="text-normal">Options</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for part_class in part_classes %}
                                <tr>
                                    <td>
                                        <label><input type="checkbox" class="filled-in checkbox-array" name="actions" value="{{ part_class.id }}"><span></span></label>
                                    </td>
                                    <td class="text-normal">{{ part_class.code }}</td>
                                    <td class="text-normal">{{ part_class.name }}</td>
                                    <td class="text-normal">{{ part_class.comment }}</td>
                                    <td class="text-normal">{% if part_class.mouser_enabled %}
                                        <img height="24" style="padding: 4px 4px 0 4px;" alt="Mouser" title="Via Mouser.com" src="{% static 'bom/img/mouser.png' %}">{% endif %}</td>
                                    <td>
                                        <a class="waves-effect waves-green btn-flat green-text text-lighten-1" href="{% url 'bom:part-class-edit' part_class_id=part_class.id %}"><i
                                                class="material-icons left green-text text-lighten-1">edit</i>Edit</a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    {% else %}
                        <p>No part classes have been defined yet.</p>
                    {% endif %}
                </form>

                <h3>Create Part Class</h3>
                <form name="seller" action="{% url 'bom:settings' tab_anchor=INDABOM_TAB %}" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row">
                        {{ part_class_form.non_field_errors }}
                        {{ part_class_form.code|materializecss:'s12 m1' }}
                        {{ part_class_form.name|materializecss:'s12 m4' }}
                        {{ part_class_form.comment|materializecss:'s12 m7' }}
                    </div>
                    <div class="row">
                        <div class="col s6">
                            <a type="button" class="waves-effect waves-light btn grey lighten-1" href="{% url 'bom:settings' tab_anchor=INDABOM_TAB %}">Clear</a>
                        </div>
                        <div class="col s6 right-align">
                            <button class="waves-effect waves-light btn green lighten-1" type="submit" name="submit-part-class-create">Create</button>
                        </div>
                    </div>
                </form>

                <h3>Upload Part Classes</h3>
                <form name="seller" action="{% url 'bom:settings' tab_anchor=INDABOM_TAB %}" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <p>To batch define {% if part_classes.count > 0 %} additional {% endif %}part classes, upload a csv that contains columns with the headers
                        <b>'name'</b> and <b>'code'</b>. You may optionally specify a description or comment by including
                        a column with the header <b>'description'</b> or <b>'comment'</b>.</p>
                    <div class="row">
                        <div class="col s11 file-field input-field">
                            <div class="green lighten-1 btn">
                                <span>File</span>
                                {{ part_class_csv_form.file }}
                            </div>
                            <div class="file-path-wrapper">
                                <input class="file-path validate" type="text" placeholder="Upload a file.">
                                {{ part_class_csv_form.file.errors }}
                            </div>
                        </div>
                        <div class="col s1 input-field">
                            <input class="green lighten-1 btn" type="submit" name="submit-part-class-upload" value="Upload"/>
                        </div>
                    </div>
                </form>

            {% else %}
                {% include 'bom/nothing-to-see.html' with required_privilege='Admin' %}
            {% endif %}



            <h3 id="indabom-part-number">Part Number</h3>
            <form name="seller" action="{% url 'bom:settings' tab_anchor=INDABOM_TAB %}" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <p>You may only increase the number of digits, up to 10, in your part number item number (CC-{{ organization.number_ns }}-VV, where {{ organization.number_ns }} is the number
                    item).</p>
                <div class="row">
                    {{ number_item_len_form.number_item_len|materializecss:'s12 m3' }}
                </div>
                <div class="row">
                    <div class="col s6">
                        <a type="button" class="waves-effect waves-light btn grey lighten-1" href="{% url 'bom:settings' tab_anchor=INDABOM_TAB %}">Refresh</a>
                    </div>
                    <div class="col s6 right-align">
                        <button class="waves-effect waves-light btn green lighten-1" type="submit" name="submit-number-item-len"
                                onclick="return confirm('Are you sure you want to change the number of digits?')">Save
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <div id="organization" class="col s12">
            {% if organization.owner == user %}
                <h3>Organization</h3>
                <form name="seller" action="{% url 'bom:settings' tab_anchor=ORGANIZATION_TAB %}" method="post" class="col s12" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row">
                        {{ organization_form.name|materializecss:'s12 m6' }}
                        {{ organization_form.owner|materializecss:'s12 m6' }}
                    </div>
                    <div class="row">
                        <div class="col s6">
                            <a class="waves-effect waves-light btn grey lighten-1" type="button" href="{% url 'bom:settings' tab_anchor=ORGANIZATION_TAB %}">Refresh</a>
                        </div>
                        <div class="col s6 right-align">
                            <button class="waves-effect waves-light btn green lighten-1" type="submit" name="submit-edit-organization"
                                    onclick="return confirm('Are you sure you want to change the organization information?')">Save
                            </button>
                        </div>
                    </div>
                </form>
                <br/>
                <h3>Users</h3>
                {% if users_in_organization.count > 0 %}
                    <form name="seller" action="{% url 'bom:settings' tab_anchor=ORGANIZATION_TAB %}" method="post" class="col s12" enctype="multipart/form-data">
                        {% csrf_token %}
                        <table>
                            <thead>
                            <tr>
                                <th class="text-normal">Remove?</th>
                                <th class="text-normal">Role</th>
                                <th class="text-normal">User Name</th>
                                <th class="text-normal">Full Name</th>
                                <th class="text-normal">Email</th>
                                <th class="text-normal"></th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for org_user in users_in_organization %}
                                <tr>
                                    <td>
                                        <label><input type="checkbox" class="filled-in" name="remove_user_meta_id_{{ org_user.bom_profile.id }}"><span/></label>
                                    </td>
                                    <td class="text-normal">{{ org_user.bom_profile.get_role_display }}</td>
                                    <td class="text-normal">{{ org_user.username }}</td>
                                    <td class="text-normal">{{ org_user.first_name }} {{ org_user.last_name }}</td>
                                    <td class="text-normal"><a href="mailto:{{ user.email }}">{{ org_user.email }}</a></td>
                                    <td>
                                        <a class="waves-effect waves-green btn-flat green-text text-lighten-1" href="{% url 'bom:user-meta-edit' user_meta_id=org_user.bom_profile.id %}"><i
                                                class="material-icons left green-text text-lighten-1">edit</i>Edit</a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                        <div class="row" style="padding-top: 16px;">
                            <div class="col s6">
                                <a class="waves-effect waves-light btn grey lighten-1" type="button" onclick="user_checkbox_clear_all()">Clear</a>
                                <button class="waves-effect waves-light btn red lighten-1" type="submit" name="submit-remove-user"
                                        onclick="return confirm('Are you sure you want to remove the selected users from {{ organization }}?')">Remove
                                </button>
                            </div>
                        </div>
                    </form>
                {% else %}
                    <div class="row" style="padding-left: .75rem;">
                        <div class="col s12">
                            <p>There are no additional users in this organization: {{ organization }}.</p>
                        </div>
                    </div>
                {% endif %}
                <h3>Add User</h3>
                <form name="seller" action="{% url 'bom:settings' tab_anchor=ORGANIZATION_TAB %}" method="post" class="col s12" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row">
                        {{ user_add_form.username|materializecss:'s12 m8' }}
                        {{ user_add_form.role|materializecss:'s12 m4' }}
                        {{ user_add_form.file.errors }}
                    </div>
                    <div class="row">
                        <div class="col s12">
                            <i>Adding users to your organization is a paid feature, but is free for a
                                limited time while we are still developing the tool. Contact <a href="mailto:info@indabom.com">info@indabom.com</a> if you are interested.</i>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s6">
                            <a class="waves-effect waves-light btn grey lighten-1" type="button" href="{% url 'bom:settings' tab_anchor=ORGANIZATION_TAB %}">Clear</a>
                        </div>
                        <div class="col s6 right-align">
                            <button class="waves-effect waves-light btn green lighten-1" type="submit" {% if organization.subscription == 'F' %}disabled{% endif %} name="submit-add-user">Add
                            </button>
                        </div>
                    </div>
                </form>

                <h3>Part File Storage with Google Drive <img title="Via Google Drive" style="height: 2.5rem; padding-bottom: 8px; vertical-align: middle;"
                                                             src="{% static 'bom/img/google_drive_logo.svg' %}"></h3>
                <p>Connect your Google account. Organization owners can enable file storage using Google Drive. {% if organization.owner == user %} Since you are the owner, you are able to enable
                    file storage!{% else %}Contact your organization owner to enable.{% endif %}<p>
                <p>When you connect, we will create a folder called <b>IndaBOM Part Files</b> in your root of Google drive (and can be moved anywhere in your drive). To add files to a part,
                    navigate to the part in IndaBOM, and on the part's <b>Specifications</b> tab, click the <img title="Via Google Drive" style="width: 16px; vertical-align: middle;"
                                                                                                                 src="{% static 'bom/img/google_drive_logo.svg' %}">&nbsp;Google Drive link.
                    This will create a folder for your part in your root IndaBOM directory, or take you there if it already exists.<p>
                <p>You'll be able to access the files directly through Google Drive, and through IndaBOM.</p>
                <h4>Google Connections</h4>
                <ul>
                    {% if google_authentication %}
                        <p>Logged in to Google as: {{ google_authentication.uid }}
                        <form action="{% url 'social:disconnect' 'google-oauth2' %}" method="post">
                            {% csrf_token %}
                            <button class="waves-effect waves-light btn green lighten-1" type="submit">Disconnect</button>
                        </form>
                    {% else %}
                        <a href="{% url "social:begin" "google-oauth2" %}">
                            <img title="Google sign-in." src="{% static 'bom/img/google/web/1x/btn_google_signin_dark_normal_web.png' %}">
                        </a>
                        <p>Note! You may get a warning from Google saying: "This app isn't verified".</p>
                        <p>This is because we're a small project and have not yet gotten verified as an app by Google. Since the project is open source, feel free to review the code if you have
                            security concerns, or proceed through the warning if you are comfortable.</p>
                    {% endif %}
                </ul>
                <h3>Automagic Sourcing via Mouser <img title="Sourcing via Mouser.com" style="height: 2.5rem; padding-bottom: 8px; vertical-align: middle;" src="{% static 'bom/img/mouser.png' %}">
                </h3>
                <p>No connection required. To enable sourcing via mouser, select which part classes you'd like enabled on the Settings INDABOM tab. Once enabled, sourcing information will appear on
                    part detail pages in which there are parts sourced via Mouser.</p>
            {% else %}
                <p>Nothing to see here 🙈 because you are not the organization owner. Please contact
                    <a href="mailto:{{ organization.owner.email }}">{{ organization.owner.email }}</a> for assistance.</p>
            {% endif %}
        </div>
    </div>

{% endblock %}

{% block bom-script %}

    <!-- Handle if there's an anchor, select tab -->
    <script type='text/javascript'>
        var tabsElem = document.querySelector('.tabs');
        var tabs = M.Tabs.init(tabsElem);
        {% if tab_anchor %}
            tabs.select('{{tab_anchor}}');
        {% endif %}
    </script>

    <script type='text/javascript'>
        function user_checkbox_clear_all() {
            $("input[type='checkbox']:checked").prop("checked", false)
        }
    </script>

    <script type='text/javascript'>
        $(document).ready(function () {
            $('#part-class-select-all').change(function () {
                if ($("#part-class-select-all").is(":checked")) {
                    $("input[type='checkbox']:not(:checked)").prop("checked", true)
                } else {
                    $("input[type='checkbox']:checked").prop("checked", false)
                }
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            let $checkbox = $('.checkbox-array');
            let lastChecked = null;

            $checkbox.click(function (e) {
                if (!lastChecked) {
                    lastChecked = this;
                    return;
                }

                if (e.shiftKey) {
                    const start = $checkbox.index(this);
                    const end = $checkbox.index(lastChecked);
                    $checkbox.slice(Math.min(start, end), Math.max(start, end) + 1).prop('checked', lastChecked.checked);
                }
                lastChecked = this;
            });
        });
    </script>

{% endblock bom-script %}