{% extends "layout.html" %}

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

{% block content %}

<form method="POST" action="{{ url_for('main.settings') }}">
    {{ 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');
                    roomNameInput.value = document.getElementById('room-input').value;
                    
                    roomEditor.show();
                    {% endset %}
                    <div class="col">
                        {{ combos.render_combobox(
                        id='room',
                        options=rooms,
                        label='Rooms',
                        placeholder='Add a new room',
                        onAdd=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" name="roomName" id="roomName"
                                placeholder="Enter room name">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <label for="roomSection" class="form-label">Section</label>
                            <select name="roomSection" id="roomSection" class="form-select">
                                <option>Select a section</option>
                                {% for section in sections %}
                                <option value="{{ section.id }}">{{ section.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col">
                            <label for="roomFunction" class="form-label">Function</label>
                            <select name="roomFunction" id="roomFunction" class="form-select">
                                <option>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>
</form>
{% endblock %}

{% block script %}
    document.addEventListener('DOMContentLoaded', () => {
        const modal = document.getElementById('roomEditor');
        const saveButton = document.getElementById('roomEditorSaveButton');
        const cancelButton = document.getElementById('roomEditorCancelButton');
    
        saveButton.addEventListener('click', () => {
            console.log('Save button clicked');
        
            const name = document.getElementById('roomName').value;
            const section = document.getElementById('roomSection').value;
            const func = document.getElementById('roomFunction').value;
        
            if (name.trim()) {
                const newRoom = ComboBoxWidget.createOption(`${name}`, null);
                const selectWidget = document.getElementById('room-list');
                
                selectWidget.appendChild(newRoom);
                ComboBoxWidget.sortOptions(selectWidget);
                bootstrap.Modal.getInstance(modal).hide();
            } else {
                alert('Please enter a room name.');
            }
        });
    
        cancelButton.addEventListener('click', () => {
            console.log('Cancel button clicked');
            bootstrap.Modal.getInstance(modal).hide();
        });
    });
{% endblock %}