
<div class="container-fluid">
    <h4 class="mb-4">Editar Nodo de Ruta</h4>

    <form action="<?= BASE_ACTION ?>procedures-route/<?= $route->id ?>/update" method="POST">
        <input type="hidden" name="_method" value="PUT">

        <div class="form-group">
            <label for="area">Área</label>
            <select id="area" name="area_id" class="form-control" required>
                <option value="">Seleccione un Área</option>
                <?php foreach ($areas as $area) : ?>
                    <option value="<?= $area->id ?>" <?= ($route->area() && $route->area()->id == $area->id) ? 'selected' : '' ?>>
                        <?= htmlspecialchars($area->description) ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>

        <div class="form-group">
            <label for="group_type">Tipo de Grupo</label>
            <select id="group_type" name="group_type_id" class="form-control" required>
                <option value="">Seleccione un Tipo de Grupo</option>
                <?php if ($route->area()) : ?>
                    <?php foreach ($route->area()->groupTypes as $gt) : ?>
                        <option value="<?= $gt->id ?>" <?= ($route->groupType() && $route->groupType()->id == $gt->id) ? 'selected' : '' ?>>
                            <?= htmlspecialchars($gt->description) ?>
                        </option>
                    <?php endforeach; ?>
                <?php endif; ?>
            </select>
        </div>

        <div class="form-group">
            <label for="group">Grupo</label>
            <select id="group" name="group_id" class="form-control" required>
                <option value="">Seleccione un Grupo</option>
                <?php if ($route->groupType()) : ?>
                    <?php foreach ($route->groupType()->groups as $g) : ?>
                        <option value="<?= $g->id ?>" <?= ($route->group() && $route->group()->id == $g->id) ? 'selected' : '' ?>>
                            <?= htmlspecialchars($g->description) ?>
                        </option>
                    <?php endforeach; ?>
                <?php endif; ?>
            </select>
        </div>

        <div class="form-group">
            <label for="subgroup">Subgrupo</label>
            <select id="subgroup" name="subgroup_id" class="form-control">
                <option value="">Seleccione un Subgrupo</option>
                <?php if ($route->group()) : ?>
                    <?php foreach ($route->group()->subgroups as $sg) : ?>
                        <option value="<?= $sg->id ?>" <?= ($route->subgroup() && $route->subgroup()->id == $sg->id) ? 'selected' : '' ?>>
                            <?= htmlspecialchars($sg->description) ?>
                        </option>
                    <?php endforeach; ?>
                <?php endif; ?>
            </select>
        </div>

        <a href="<?= BASE_HREF ?>procedures-route/<?= $route->procedure_id ?>" class="btn btn-secondary mt-4">Cancelar</a>
        <button type="submit" class="btn btn-primary mt-4">Guardar cambios</button>
    </form>
</div>


<script>
    const areas = <?= json_encode($areas, JSON_PRETTY_PRINT) ?>;
    console.log(areas);

    function loadGroupTypes(selectedGroupTypeId = null) {
        const areaId = document.getElementById('area').value;
        const groupTypeSelect = document.getElementById('group_type');
        groupTypeSelect.innerHTML = '<option value="">Seleccione un Tipo de Grupo</option>';

        if (areaId) {
            const area = areas.find(a => a.id == areaId);
            if (area) {
                groupTypeSelect.disabled = false;
                Object.values(area.groupTypes).forEach(groupType => {
                    const option = new Option(groupType.description, groupType.id);
                    if (selectedGroupTypeId && selectedGroupTypeId == groupType.id) {
                        option.selected = true;
                    }
                    groupTypeSelect.add(option);
                });
            }
        }
    }

    function loadGroups(selectedGroupId = null) {
        const groupTypeId = document.getElementById('group_type').value;
        const groupSelect = document.getElementById('group');
        groupSelect.innerHTML = '<option value="">Seleccione un Grupo</option>';

        if (groupTypeId) {
            const areaId = document.getElementById('area').value;
            const area = areas.find(a => a.id == areaId);
            if (area) {
                const groupType = Object.values(area.groupTypes).find(gt => gt.id == groupTypeId);
                if (groupType) {
                    groupSelect.disabled = false;
                    Object.values(groupType.groups).forEach(group => {
                        const option = new Option(group.description, group.id);
                        if (selectedGroupId && selectedGroupId == group.id) {
                            option.selected = true;
                        }
                        groupSelect.add(option);
                    });
                }
            }
        }
    }

    function loadSubgroups(selectedSubgroupId = null) {
        const groupId = document.getElementById('group').value;
        const subgroupSelect = document.getElementById('subgroup');
        subgroupSelect.innerHTML = '<option value="">Seleccione un Subgrupo</option>';

        if (groupId) {
            const areaId = document.getElementById('area').value;
            const groupTypeId = document.getElementById('group_type').value;
            const area = areas.find(a => a.id == areaId);
            if (area) {
                const groupType = Object.values(area.groupTypes).find(gt => gt.id == groupTypeId);
                if (groupType) {
                    const group = Object.values(groupType.groups).find(g => g.id == groupId);
                    if (group) {
                        subgroupSelect.disabled = false;
                        Object.values(group.subGroups).forEach(subgroup => {
                            const option = new Option(subgroup.description, subgroup.id);
                            if (selectedSubgroupId && selectedSubgroupId == subgroup.id) {
                                option.selected = true;
                            }
                            subgroupSelect.add(option);
                        });
                    }
                }
            }
        }
    }

    document.getElementById('area').addEventListener('change', function () {
        loadGroupTypes();
        document.getElementById('group').innerHTML = '<option value="">Seleccione un Grupo</option>';
        document.getElementById('subgroup').innerHTML = '<option value="">Seleccione un Subgrupo</option>';
    });

    document.getElementById('group_type').addEventListener('change', function () {
        loadGroups();
        document.getElementById('subgroup').innerHTML = '<option value="">Seleccione un Subgrupo</option>';
    });

    document.getElementById('group').addEventListener('change', function () {
        loadSubgroups();
    });

    window.onload = function () {
        loadGroupTypes(<?= $route->groupType() ? $route->groupType()->id : 'null' ?>);
        loadGroups(<?= $route->group() ? $route->group()->id : 'null' ?>);
        loadSubgroups(<?= $route->subgroup() ? $route->subgroup()->id : 'null' ?>);
    };
</script>


