<!DOCTYPE html>
<html lang="en" dir="ltr" id="main_html">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
        <title id="title"></title>
        <!-- Material Icons -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <!-- Material Symbols - Outlined Set -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
        <!-- Material Symbols - Rounded Set -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
        <!-- Material Symbols - Sharp Set -->
        <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
        <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>

        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
    </head>
    <body id="test">
        <div class="uk-container uk-section uk-margin-remove-top">
            <div uk-grid>
                <div class="uk-width-1-1" >
                    <a href="/admin" class="uk-button uk-button-small"><span class="uk-flex material-symbols-outlined">arrow_back</span></a>
                    <a onclick="toggleDarkMode()" class="uk-button uk-button-small uk-align-right"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
                </div>
                <div class="uk-width-1-1">
                    <h3 class="uk-text-center">Site Form</h3>
                </div>
                <div class="uk-width-1-1">
                    <p>Sites are the main driving force of the system. They are essentially larger pools of items and apps that are segregated and only meet in cross-sites applications. Think of
                        sites as your house, your shed, or your car. When designing a site think about who has access and who will be using it the most often, what permissions might be needed, and
                        do you need all the apps active on the site. The more sites you have the more bloated the system can become so beware making tons of sites. Thats why Zones and Locations 
                        exist.</p>
                </div>
                <div class="uk-width-1-1">
                    <hr class="uk-divider-icon">
                </div>
                <div class="uk-width-1-1">
                    <div class="uk-margin">
                        <label class="uk-form-label" for="site_name">Site Name</label>
                        <div class="uk-form-controls">
                            <input class="uk-input" id="site_name" type="text" placeholder="Some text...">
                        </div>
                    </div>
                </div>
                <div class="uk-width-1-1">
                    <div class="uk-margin">
                        <label class="uk-form-label" for="site_description">Site Description</label>
                        <div class="uk-form-controls">
                            <textarea id="site_description" class="uk-textarea" rows="5" placeholder="Textarea" aria-label="Textarea"></textarea>
                        </div>
                    </div>
                </div>
                <div class="uk-width-1-1">
                    <div class="uk-margin">
                        <label class="uk-form-label" for="creation_date">Creation Date</label>
                        <div class="uk-form-controls">
                            <input class="uk-input uk-disabled" id="creation_date" type="text" placeholder="Some text...">
                        </div>
                    </div>
                </div>
                <div class="uk-width-1-1">
                    <div class="uk-margin">
                        <label class="uk-form-label" for="site_owner">Site Owner</label>
                        <div class="uk-form-controls">
                            <input class="uk-input uk-disabled" id="site_owner" type="text" placeholder="Some text...">
                        </div>
                    </div>
                </div>
                <div id="edit_locations" class="uk-width-1-1">
                    <div class="uk-width-large uk-grid-small" uk-grid>
                        <div class="uk-width-3-4 uk-margin-auto-top">
                            <label for="default_zone">Default Zone</label>
                            <input class="uk-input uk-disabled" id="default_zone" type="text">
                        </div>
                        <div class="uk-width-1-4 uk-margin-auto-top">
                            <button onclick="" class="uk-button uk-button-default">Select</button>
                        </div>
                    </div>
                    <div class="uk-width-large uk-grid-small" uk-grid>
                        <div class="uk-width-3-4 uk-margin-auto-top">
                            <label for="default_auto_issue_location">Default Auto Issue Location</label>
                            <input class="uk-input uk-disabled" id="default_auto_issue_location" type="text">
                        </div>
                        <div class="uk-width-1-4 uk-margin-auto-top">
                            <button onclick="" class="uk-button uk-button-default">Select</button>
                        </div>
                    </div>
                    <div class="uk-width-large uk-grid-small" uk-grid>
                        <div class="uk-width-3-4 uk-margin-auto-top">
                            <label for="default_primary_location">Default Primary Location</label>
                            <input class="uk-input uk-disabled" id="default_primary_location" type="text">
                        </div>
                        <div class="uk-width-1-4 uk-margin-auto-top">
                            <button onclick="" class="uk-button uk-button-default">Select</button>
                        </div>
                    </div>
                </div>
                <div id="new_locations" class="uk-width-1-1" uk-grid>
                    <div class="uk-width-1-1">
                        <caption> These are how the system will create the default locations and zones that get assigned to all new items by default.</caption>
                    </div>
                    <div class="uk-width-1-1">
                        <div class="">
                            <label for="new_default_zone">Default Zone</label>
                            <div class="uk-form-controls">
                                <input class="uk-input" id="new_default_zone" type="text" placeholder="Some text...">
                            </div>
                        </div>
                    </div>
                    <div class="uk-width-1-1">
                        <div class="">
                            <label for="new_default_auto_issue_location">Default Auto Issue Location</label>
                            <div class="uk-form-controls">
                                <input class="uk-input" id="new_default_auto_issue_location" type="text" placeholder="Some text...">
                            </div>
                        </div>
                    </div>
                    <div class="uk-width-1-1">
                        <div class="">
                            <label for="new_default_primary_location">Default Primary Location</label>
                            <div class="uk-form-controls">
                                <input class="uk-input" id="new_default_primary_location" type="text" placeholder="Some text...">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="uk-width-1-1">
                    <hr class="uk-divider-icon">
                </div>
                <div class="uk-width-1-1 uk-margin-remove">
                    <button id="SubmitButton" class="uk-button uk-button-primary uk-align-right">Save</button>
                </div>
            </div>
        </div>
    </body>
    {% assets "js_all" %}
    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
    {% endassets %}
    <script>
        const site = {{site|tojson}}
        const session = {{session|tojson}}
        const path = window.location.pathname
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', async function() {
            let mode = "edit"
            if(path == "/admin/site/new"){
                mode = "new"
            }
            replenishForm(site, mode)
            console.log(mode)
        })

        var mode = false
        async function toggleDarkMode() {
            let darkMode = document.getElementById("dark-mode");    
            darkMode.disabled = !darkMode.disabled;
            mode = !mode;
            if(mode){
                document.getElementById('modeToggle').innerHTML = "light_mode"
                document.getElementById('main_html').classList.add('uk-light')
            } else {
                document.getElementById('modeToggle').innerHTML = "dark_mode"
                document.getElementById('main_html').classList.remove('uk-light')
            }
        }

        if(session.user.flags.darkmode){
            toggleDarkMode()
        }

        async function replenishForm(site, mode){
            document.getElementById('site_name').value = site.site_name
            document.getElementById('site_description').value = site.site_description
            document.getElementById('creation_date').value = site.creation_date
            document.getElementById('site_owner').value = site.site_owner_id

            if(mode=="new"){
                document.getElementById('edit_locations').hidden = true
                document.getElementById('new_locations').hidden = false
                document.getElementById('SubmitButton').innerHTML = "Add Site"
                document.getElementById('SubmitButton').onclick = async function(){
                    await postAddSite()
                }
            } else {
                document.getElementById('edit_locations').hidden = false
                document.getElementById('new_locations').hidden = true
                document.getElementById('default_zone').value = site.default_zone
                document.getElementById('default_auto_issue_location').value = site.default_auto_issue_location
                document.getElementById('default_primary_location').value = site.default_primary_location
                document.getElementById('SubmitButton').innerHTML = "Update Site"
                document.getElementById('SubmitButton').onclick = async function(){
                    await postEditSite()
                }
            }

            
        }

        async function postAddSite(){
            
            let payload = {
                site_name: document.getElementById('site_name').value,
                site_description: document.getElementById('site_description').value,
                default_zone: document.getElementById('new_default_zone').value,
                default_auto_issue_location: document.getElementById('new_default_auto_issue_location').value,
                default_primary_location: document.getElementById('new_default_primary_location').value
            }

            const response = await fetch(`/admin/site/postAddSite`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    payload: payload
                }),
            });
        }

        async function postEditSite(){
            
            let payload = {
                id: site.id,
                update: {site_name: document.getElementById('site_name').value,
                site_description: document.getElementById('site_description').value}
            }

            const response = await fetch(`/admin/site/postEditSite`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    payload: payload
                }),
            });
        }
    </script>
</html>