<div class="modal fade" id="editRelationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered relation-designer-modal">
        <div class="modal-content">
            <div class="modal-header relation-modal-header relation-modal-header-edit py-2">
                <div>
                    <h6 class="modal-title mb-0"><i class="bi bi-pencil me-2"></i>Edit Relation</h6>
                    <span class="relation-modal-subtitle">Refine how this master-detail relation behaves</span>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close edit relation"></button>
            </div>
            <div class="modal-body relation-modal-body">
                <input type="hidden" id="editRelId">

                <div class="relation-help relation-help-compact" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Hover any relation option for guidance. Relations control generated navigation, page placement, display order, and optional database-level consistency.">
                    <i class="bi bi-question-circle"></i>
                    <span>Hover settings for help · Master shows details · Details can show master record · FK changes may require DB constraint updates</span>
                </div>

                <div class="relation-map">
                    <div class="relation-node relation-node-master">
                        <div class="relation-node-title">
                            <span><i class="bi bi-table me-1"></i>Master</span>
                            <small>Parent record</small>
                        </div>
                        <label class="relation-control">
                            <span>Table</span>
                            <input type="text" class="form-control form-control-sm" id="editRelMasterTable" readonly>
                        </label>
                        <label class="relation-control">
                            <span>Field</span>
                            <select class="form-select form-select-sm" id="editRelMasterField"></select>
                        </label>
                    </div>

                    <div class="relation-flow" aria-hidden="true">
                        <span class="relation-flow-line"></span>
                        <span class="relation-flow-icon"><i class="bi bi-arrow-right"></i></span>
                    </div>

                    <div class="relation-node relation-node-detail">
                        <div class="relation-node-title">
                            <span><i class="bi bi-table me-1"></i>Detail</span>
                            <small>Child records</small>
                        </div>
                        <label class="relation-control">
                            <span>Table</span>
                            <input type="text" class="form-control form-control-sm" id="editRelDetailTable" readonly>
                        </label>
                        <label class="relation-control">
                            <span>Field</span>
                            <select class="form-select form-select-sm" id="editRelDetailField"></select>
                        </label>
                    </div>
                </div>

                <div class="relation-section">
                    <div class="relation-section-title">
                        <span>Display option</span>
                        <small>How detail records appear in the generated app</small>
                    </div>
                    <div class="relation-choice-grid">
                        <label class="relation-choice" for="editRelDispInline">
                            <input class="form-check-input" type="radio" name="editRelDisplayOption" value="inline" id="editRelDispInline" checked>
                            <span><i class="bi bi-layout-text-sidebar-reverse"></i><strong>Inline</strong><small>Show detail rows on the page</small></span>
                        </label>
                        <label class="relation-choice" for="editRelDispPopup">
                            <input class="form-check-input" type="radio" name="editRelDisplayOption" value="popup" id="editRelDispPopup">
                            <span><i class="bi bi-window"></i><strong>Popup</strong><small>Open details in a modal</small></span>
                        </label>
                        <label class="relation-choice" for="editRelDispIcon">
                            <input class="form-check-input" type="radio" name="editRelDisplayOption" value="icon" id="editRelDispIcon">
                            <span><i class="bi bi-grid-3x3-gap"></i><strong>Icon</strong><small>Show a compact action icon</small></span>
                        </label>
                    </div>
                </div>

                <div class="relation-section relation-master-settings">
                    <div class="relation-section-title">
                        <span><i class="bi bi-link-45deg me-1"></i>Master link behavior</span>
                        <small>Controls links and previews shown from master records</small>
                    </div>
                    <div class="relation-master-grid">
                        <label class="relation-option-card" for="editRelShowDetailsLinks">
                            <input class="form-check-input" type="checkbox" id="editRelShowDetailsLinks">
                            <span>
                                <strong>Show details links on list page</strong>
                                <small>Expose navigation from master rows to their detail records.</small>
                            </span>
                        </label>
                        <div class="relation-link-mode-card">
                            <div class="relation-option-heading">Details link style</div>
                            <label class="relation-mini-choice" for="editRelDetailsLinkSingle">
                                <input class="form-check-input" type="radio" name="editRelDetailsLinkMode" value="single" id="editRelDetailsLinkSingle" checked>
                                <span>Single link for all details</span>
                            </label>
                            <label class="relation-mini-choice" for="editRelDetailsLinkIndividual">
                                <input class="form-check-input" type="radio" name="editRelDetailsLinkMode" value="individual" id="editRelDetailsLinkIndividual">
                                <span>Individual detail links</span>
                            </label>
                        </div>
                        <label class="relation-option-card" for="editRelHideDetailsNoRecords">
                            <input class="form-check-input" type="checkbox" id="editRelHideDetailsNoRecords">
                            <span>
                                <strong>Hide details if no child records exist</strong>
                                <small>Do not show empty detail links or sections.</small>
                            </span>
                        </label>
                        <label class="relation-option-card" for="editRelShowProceedLink">
                            <input class="form-check-input" type="checkbox" id="editRelShowProceedLink">
                            <span>
                                <strong>Show “Proceed to Details” link in preview</strong>
                                <small>Let users jump from preview to the full detail page.</small>
                            </span>
                        </label>
                    </div>
                </div>

                <div class="relation-options-grid">
                    <div class="relation-option-card relation-warning-card relation-fk-card">
                        <div class="relation-option-main">
                            <input class="form-check-input" type="checkbox" id="editRelAddForeignKey">
                            <label for="editRelAddForeignKey">
                                <strong><i class="bi bi-shield-exclamation me-1"></i>Foreign key constraint</strong>
                                <small>Stores referential behavior. Existing DB constraints may require recreation to change.</small>
                            </label>
                        </div>
                        <div class="relation-fk-actions">
                            <label>
                                <span>On delete</span>
                                <select class="form-select form-select-sm" id="editRelOnDeleteAction">
                                    <?php foreach ((array)($databaseDialect['referential_actions'] ?? ['CASCADE']) as $action): ?>
                                        <option value="<?= htmlspecialchars((string)$action) ?>"><?= htmlspecialchars(ucwords(strtolower((string)$action))) ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </label>
                            <label>
                                <span>On update</span>
                                <select class="form-select form-select-sm" id="editRelOnUpdateAction">
                                    <?php foreach ((array)($databaseDialect['referential_actions'] ?? ['CASCADE']) as $action): ?>
                                        <option value="<?= htmlspecialchars((string)$action) ?>"><?= htmlspecialchars(ucwords(strtolower((string)$action))) ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </label>
                        </div>
                    </div>

                    <div class="relation-option-card relation-count-card">
                        <div class="relation-option-main">
                            <input class="form-check-input" type="checkbox" id="editRelDisplayChildCount">
                            <label for="editRelDisplayChildCount">
                                <strong>Display child record count</strong>
                                <small>Add a count badge to the detail table card.</small>
                            </label>
                        </div>
                        <div class="relation-badge-color" id="editRelBadgeColorRow" style="display:none;">
                            <label class="form-label small mb-0 text-nowrap">Badge color</label>
                            <input type="color" class="form-control form-control-color form-control-sm" id="editRelBadgeColor" value="#0d6efd">
                        </div>
                    </div>

                    <label class="relation-option-card" for="editRelHideIfEmpty">
                        <input class="form-check-input" type="checkbox" id="editRelHideIfEmpty">
                        <span>
                            <strong>Hide details preview if empty</strong>
                            <small>Suppress detail records when no matching rows exist.</small>
                        </span>
                    </label>
                </div>

                <div class="relation-section relation-filter-section">
                    <div class="relation-section-title">
                        <span><i class="bi bi-funnel me-1"></i>Filter (WHERE) <small class="text-muted">optional</small></span>
                        <small>Only show child rows matching this condition — on top of the link. Supports SQL variables like <code>:userid</code>, <code>:today</code>, <code>:session.x</code>.</small>
                    </div>
                    <input type="text" class="form-control form-control-sm relation-where-input" id="editRelWhere" placeholder="e.g. status = 'active'  ·  created &gt;= :daysago.30  ·  assigned_to = :userid" spellcheck="false" autocapitalize="off" autocomplete="off">
                </div>

                <div class="relation-visibility-grid">
                    <div class="relation-section relation-visibility-panel">
                        <div class="relation-section-title">
                            <span><i class="bi bi-diagram-3 me-1"></i>For Master Table</span>
                            <small>Show detail records in these master pages</small>
                        </div>
                        <div class="relation-page-grid">
                            <?php foreach (['list', 'add', 'edit', 'view', 'print'] as $page): ?>
                                <label class="relation-page-chip" for="editRelMasterPage_<?= $page ?>">
                                    <input class="form-check-input edit-master-page-check" type="checkbox" value="<?= $page ?>" id="editRelMasterPage_<?= $page ?>">
                                    <span><?= ucfirst($page) ?></span>
                                </label>
                            <?php endforeach; ?>
                        </div>
                        <div class="relation-order-card">
                            <div>
                                <strong>Detail display order</strong>
                                <small>Lower numbers appear first when this master table has multiple detail sections.</small>
                            </div>
                            <input type="number" class="form-control form-control-sm" id="editRelDisplayOrder" value="10" min="0" step="10">
                        </div>
                    </div>

                    <div class="relation-section relation-visibility-panel">
                        <div class="relation-section-title">
                            <span><i class="bi bi-arrow-up-left-square me-1"></i>For Details Table</span>
                            <small>Show master record in these detail pages</small>
                        </div>
                        <div class="relation-page-grid">
                            <?php foreach (['list', 'add', 'edit', 'view', 'print'] as $page): ?>
                                <label class="relation-page-chip" for="editRelDetailPage_<?= $page ?>">
                                    <input class="form-check-input edit-detail-page-check" type="checkbox" value="<?= $page ?>" id="editRelDetailPage_<?= $page ?>">
                                    <span><?= ucfirst($page) ?></span>
                                </label>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>

                <div class="relation-section relation-future-pages mb-0">
                    <div class="relation-section-title">
                        <span>Additional future targets</span>
                        <small>Reserved for generated modules beyond the core page set</small>
                    </div>
                    <div class="relation-page-grid">
                        <?php foreach (['export', 'dashboard'] as $page): ?>
                            <label class="relation-page-chip" for="editRelPage_<?= $page ?>">
                                <input class="form-check-input edit-page-check" type="checkbox" value="<?= $page ?>" id="editRelPage_<?= $page ?>">
                                <span><?= ucfirst($page) ?></span>
                            </label>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
            <div class="modal-footer relation-modal-footer py-2">
                <button type="button" class="btn btn-sm btn-danger me-auto" id="btnDeleteRelation" data-bs-toggle="tooltip" title="Delete this relationship and remove its saved relation settings."><i class="bi bi-trash me-1"></i>Delete</button>
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal" data-bs-toggle="tooltip" title="Close without changing this relationship.">Cancel</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnUpdateRelation" data-bs-toggle="tooltip" title="Update this relationship’s fields, display behavior, page placement, order, and FK options."><i class="bi bi-check2 me-1"></i>Update</button>
            </div>
        </div>
    </div>
</div>
