{% extends "layout.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
{{ breadcrumbs.breadcrumb_header(
title=title,
submit_button=True
) }}

<div class="container">
    <div class="card mb-3">
        <div class="card-body">
            <h5 class="card-title">
                Inventory Settings
            </h5>
            <div class="row">
                <div class="col">
                    {{ combos.render_combobox(
                    id='brand',
                    options=brands,
                    label='Brands',
                    placeholder='Add a new brand'
                    ) }}
                </div>
                <div class="col">
                    {{ combos.render_combobox(
                    id='type',
                    options=types,
                    label='Inventory Types',
                    placeholder='Add a new type'
                    ) }}
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Location Settings</h5>
            <div class="row">
                <div class="col">
                    {{ combos.render_combobox(
                    id='section',
                    options=sections,
                    label='Sections',
                    placeholder='Add a new section'
                    ) }}
                </div>
                <div class="col">
                    {{ combos.render_combobox(
                    id='function',
                    options=functions,
                    label='Functions',
                    placeholder='Add a new function'
                    ) }}
                </div>
            </div>
            <div class="row">
                {% set room_editor %}
                const roomEditor = new bootstrap.Modal(document.getElementById('roomEditor'));
                const roomNameInput = document.getElementById('roomName');
                const input = document.getElementById('room-input');
                const name = input.value.trim();
                const existingOption = Array.from(document.getElementById('room-list').options)
                    .find(opt => opt.textContent.trim() === name);

                roomNameInput.value = name;
                document.getElementById('roomId').value = existingOption?.value ?? '';  // this will be the ID or temp ID

                if (existingOption?.dataset.sectionId)
                    document.getElementById('roomSection').value = existingOption.dataset.sectionId;

                if (existingOption?.dataset.functionId)
                    document.getElementById('roomFunction').value = existingOption.dataset.functionId;

                roomEditor.show();

                document.getElementById('room-input').value = '';
                {% endset %}
                <div class="col">
                    {{ combos.render_combobox(
                        id='room',
                        options=rooms,
                        label='Rooms',
                        placeholder='Add a new room',
                        onAdd=room_editor,
                        onEdit=room_editor
                    ) }}
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="roomEditor" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="roomEditorLabel">Room Editor</h1>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col">
                        <label for="roomName" class="form-label">Room Name</label>
                        <input type="text" class="form-input" id="roomName" placeholder="Enter room name">
                        <input type="hidden" id="roomId">
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <label for="roomSection" class="form-label">Section</label>
                        <select id="roomSection" class="form-select">
                            <option value="">Select a section</option>
                            {% for section in sections %}
                            <option value="{{ section.id }}">{{ section.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col">
                        <label class="form-label">Function</label>
                        <select id="roomFunction" class="form-select">
                            <option value="">Select a function</option>
                            {% for function in functions %}
                            <option value="{{ function.id }}">{{ function.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal"
                    id="roomEditorCancelButton">Cancel</button>
                <button type="button" class="btn btn-primary" id="roomEditorSaveButton">Save</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
    const formState = {
      brands: {{ brands | tojson }},
      types: {{ types | tojson }},
      sections: {{ sections | tojson }},
      functions: {{ functions | tojson }},
      rooms: {{ rooms | tojson }},
    };

    function buildFormState() {
        function extractOptions(id) {
            const select = document.getElementById(`${id}-list`);
            return Array.from(select.options).map(opt => ({
                name: opt.textContent.trim(),
                id: opt.value || undefined
            }));
        }

        const roomOptions = Array.from(document.getElementById('room-list').options);
        const rooms = roomOptions.map(opt => {
            const data = opt.dataset;
            return {
                id: opt.value || undefined,
                name: opt.textContent.trim(),
                section_id: data.sectionId ?? null,
                function_id: data.functionId ?? null,
            };
        });

        return {
            brands: extractOptions("brand"),
            types: extractOptions("type"),
            sections: extractOptions("section"),
            functions: extractOptions("function"),
            rooms
        };
    }

    document.addEventListener('DOMContentLoaded', () => {
        const modal = document.getElementById('roomEditor');
        const saveButton = document.getElementById('roomEditorSaveButton');
        const cancelButton = document.getElementById('roomEditorCancelButton');
        const form = document.getElementById('settingsForm');

        // Replace the whole submission logic with just JSON
        form.addEventListener('submit', () => {
            document.getElementById('formStateField').value = JSON.stringify(buildFormState());
        });

        // Modal populates dropdowns fresh from the page every time it opens
        modal.addEventListener('show.bs.modal', () => {
            const modalSections = document.getElementById('roomSection');
            const modalFunctions = document.getElementById('roomFunction');
            const pageSections = document.getElementById('section-list');
            const pageFunctions = document.getElementById('function-list');

            modalSections.innerHTML = '';
            modalFunctions.innerHTML = '';

            modalSections.appendChild(new Option("Select a section", ""));
            modalFunctions.appendChild(new Option("Select a function", ""));

            Array.from(pageSections.options).forEach(opt =>
                modalSections.appendChild(new Option(opt.textContent, opt.value))
            );
            Array.from(pageFunctions.options).forEach(opt =>
                modalFunctions.appendChild(new Option(opt.textContent, opt.value))
            );
        });

        saveButton.addEventListener('click', () => {
            const name = document.getElementById('roomName').value.trim();
            const sectionVal = document.getElementById('roomSection').value;
            const funcVal = document.getElementById('roomFunction').value;
            let idRaw = document.getElementById('roomId').value;

            if (!name) {
                alert('Please enter a room name.');
                return;
            }
        
            const roomList = document.getElementById('room-list');
            let existingOption = Array.from(roomList.options).find(opt => opt.value === idRaw);
        
            // If it's a brand new ID, generate one (string-based!)
            if (!idRaw) {
                idRaw = ComboBoxWidget.createTempId("room");
            }
        
            if (!existingOption) {
                existingOption = ComboBoxWidget.createOption(name, idRaw);
                roomList.appendChild(existingOption);
            }
        
            existingOption.textContent = name;
            existingOption.value = idRaw;
            existingOption.dataset.sectionId = sectionVal;
            existingOption.dataset.functionId = funcVal;
        
            ComboBoxWidget.sortOptions(roomList);
        
            // Update formState.rooms
            const index = formState.rooms.findIndex(r => r.id === idRaw);
            const payload = {
                id: idRaw,
                name,
                section_id: sectionVal !== "" ? sectionVal : null,
                function_id: funcVal !== "" ? funcVal : null
            };
        
            if (index >= 0) {
                formState.rooms[index] = payload;
            } else {
                formState.rooms.push(payload);
            }
        
            bootstrap.Modal.getInstance(modal).hide();
        });

        cancelButton.addEventListener('click', () => {
            bootstrap.Modal.getInstance(modal).hide();
        });
    });
{% endblock %}