<%- include('../partials/header.ejs') %>

<script>
    let ids = [];

    function makeId() {
        let result = '';
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
        for(let i = 0; i < 10; i++ ) {
            result += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        if(ids.includes(result)) { // if in the tiny chance the id already exists create a new one
            return makeId(); // fancy recursive function
        } else {
            return result
        }
    }

    function addLink(id) {
        id.innerHTML += `
            <div class="input-group mb-3">
                <input type="text" class="text-input text-light bg-white-50 form-control form-control" id="sectionLinkName" required placeholder="Link Name" aria-label="Link Name">
                <input type="text" class="text-input text-light bg-white-50 form-control form-control" id="sectionLinkURL" required placeholder="Link URL" aria-label="Link URL">
            </div>
        `;
    }

    function addSection() {
        let id = makeId();
        document.querySelector('#sections').innerHTML += `
            <hr>
            <div class="mb-3">
                <input type="text" class="text-input text-light bg-white-50 form-control" id="${id}name" required placeholder="Section Name" aria-label="Section Name">
            </div>
            <div id="${id}">
            </div>
            <div class="mb-3">
                <button class="btn btn-outline-primary" onclick="addLink(${id});" type="button">Add Link</button>
            </div>
        `;
        ids.push(id);
    }

    function formSubmit() {
        let sections = {};
        for(let id of ids ) {
            let sectionName = document.querySelector(`#${id}name`).value;
            sections[sectionName] = {};
            for(let link of document.querySelector(`#${id}`).children) {
               sections[sectionName][link.children[0].value] = link.children[1].value;
            }
        }
        document.querySelector('#phoneSections').value = JSON.stringify(sections);
        document.querySelector('form').submit();
    }
</script>

<div class="center">
    <div class="blur-box text-light phone-box">
        <p>You are logged in as: <%= user %></p>
        <p>Inputs left as blank will be shown as "N/A". Fields marked with "*" are required.</p>
        <a href="/admin"><button class="btn btn-outline-warning mb-3">Back</button></a>
        <div class="mb-3">
            <h5>Main Info</h5>
        </div>
        <hr>
        <form method="post" action="/api/phone">
            <div class="mb-3">
                <label for="phoneBrand" class="form-label">Brand *</label>
                <select class="form-select text-light text-input bg-white-50" name="brand" id="phoneBrand">
                    <% for(brand of brands) { %>
                    <option value="<%= brand._id %>"><%= brand.name %></option>
                    <% } %>
                </select>
            </div>
            <div class="mb-3">
                <label for="phoneName" class="form-label">Name *</label>
                <input type="text" class="text-input text-light bg-white-50 form-control" id="phoneName" required name="name">
            </div>
            <div class="mb-3">
                <label for="phoneModel" class="form-label">Model *</label>
                <input type="text" class="text-input text-light bg-white-50 form-control" id="phoneModel" required name="model">
            </div>
            <div class="mb-3">
                <label for="phoneChipset" class="form-label">Chipset *</label>
                <input type="text" class="text-input text-light bg-white-50 form-control" id="phoneChipset" required name="chipset">
            </div>
            <div class="mb-3">
                <label for="phoneCard" class="form-label">Card slot</label>
                <input type="text" class="text-input text-light bg-white-50 form-control" id="phoneCard" name="sdcard">
            </div>
            <div class="mb-3">
                <label for="phoneStorage" class="form-label">Internal Storage *</label>
                <input type="text" class="text-input text-light bg-white-50 form-control" id="phoneStorage" required name="storage">
            </div>
            <div class="mb-3">
                <label for="phoneUSB" class="form-label">USB *</label>
                <input type="text" class="text-input text-light bg-white-50 form-control" id="phoneUSB" required name="usb">
            </div>
            <div class="mb-3">
                <label for="phoneBattery" class="form-label">Battery *</label>
                <input type="text" class="text-input text-light bg-white-50 form-control" id="phoneBattery" required name="battery">
            </div>
            <div class="mb-3">
                <label for="phoneDisplay" class="form-label">Display *</label>
                <input type="text" class="text-input text-light bg-white-50 form-control" id="phoneDisplay" required name="display">
            </div>
            <div class="mb-3">
                <label for="phoneOS" class="form-label">OS *</label>
                <input type="text" class="text-input text-light bg-white-50 form-control" id="phoneOS" required name="os">
            </div>
            <hr>
            <div class="mb-3">
                <h5>Files</h5>
            </div>
            <div class="mb-3">
                <label for="phoneImage" class="form-label">Image (url) *</label>
                <input type="url" class="text-input text-light bg-white-50 form-control" id="phoneImage" required name="image">
            </div>
            <div id="sections">
            </div>
            <div class="mb-3">
                <button class="btn btn-outline-primary" onclick="addSection();" type="button">Add section</button>
            </div>
            <input type="hidden" id="phoneSections" name="sections" value="none">
            <hr>
            <div class="mb-3">
                <label for="phonePartMap" class="form-label">Partition map (ls -l)</label>
                <textarea class="form-control text-input text-light bg-white-50" id="phonePartMap" name="partmap"></textarea>
            </div>
            <button type="button" class="btn btn-outline-primary w-100" onclick="formSubmit();">Submit</button>
        </form>
    </div>
</div>

<%- include ('../partials/footer.ejs') %>