<?php
/**
 * Admin view – Wartungsmodus (redesigned)
 *
 * @author  Benny Weber
 * @copyright ITSWEBER, www.itsweber.de
 *
 * Variables:
 *   bool   $isActive       – user-controlled maintenance mode active?
 *   array  $config         – current config from storage/.maintenance_mode
 *   bool   $backupFlagSet  – backup/restore .maintenance flag active?
 *   object $auth
 *   string $csrf
 */
ob_start(); ?>

<?php admin_content_header(__('admin.maintenance.title'), 'wrench'); ?>

<div class="admin-section">

    <!-- Status Banner -->
    <?php if ($isActive): ?>
    <div class="mnt-status-banner mnt-status-banner--active">
        <div class="mnt-status-banner__icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                <line x1="12" y1="9" x2="12" y2="13"/>
                <line x1="12" y1="17" x2="12.01" y2="17"/>
            </svg>
        </div>
        <div class="mnt-status-banner__text">
            <strong><?= __('admin.maintenance.active_warning') ?></strong>
            <span><?= __('admin.maintenance.active_text') ?></span>
        </div>
        <?php if (!empty($config['activated_at'])): ?>
        <div class="mnt-status-banner__meta">
            <?= __('admin.maintenance.activated_at', ['date' => e($config['activated_at'])]) ?>
        </div>
        <?php endif; ?>
    </div>
    <?php else: ?>
    <div class="mnt-status-banner mnt-status-banner--inactive">
        <div class="mnt-status-banner__icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                <polyline points="22 4 12 14.01 9 11.01"/>
            </svg>
        </div>
        <div class="mnt-status-banner__text">
            <strong><?= __('admin.maintenance.inactive_ok') ?></strong>
            <span><?= __('admin.maintenance.inactive_text') ?></span>
        </div>
    </div>
    <?php endif; ?>

    <?php if ($backupFlagSet): ?>
    <div class="mnt-status-banner mnt-status-banner--info" style="margin-top:.75rem;">
        <div class="mnt-status-banner__icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"/>
                <line x1="12" y1="16" x2="12" y2="12"/>
                <line x1="12" y1="8" x2="12.01" y2="8"/>
            </svg>
        </div>
        <div class="mnt-status-banner__text">
            <strong><?= __('admin.maintenance.backup_flag') ?></strong>
            <span><code>storage/.maintenance</code> <?= __('admin.maintenance.backup_flag_description') ?></span>
        </div>
    </div>
    <?php endif; ?>

    <!-- ── Active: Disable + Config Summary ────────────────────────────────── -->
    <?php if ($isActive): ?>
    <div class="mnt-active-controls">
        <form method="POST" action="/admin/maintenance/disable" class="mnt-disable-form">
            <?= $csrf->field() ?>
            <button type="submit" class="btn btn-danger"
                    onclick="return confirm('<?= __('admin.maintenance.confirm_disable') ?>')">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                    <line x1="9" y1="9" x2="15" y2="15"/>
                    <line x1="15" y1="9" x2="9" y2="15"/>
                </svg>
                <?= __('admin.maintenance.disable_btn') ?>
            </button>
        </form>
        <a href="/" target="_blank" class="btn btn-secondary">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                <circle cx="12" cy="12" r="3"/>
            </svg>
            <?= __('admin.maintenance.preview_btn') ?>
        </a>
    </div>

    <!-- Config Summary -->
    <div class="form-card mnt-summary-card">
        <h4><?= __('admin.maintenance.current_config') ?></h4>
        <div class="mnt-summary-grid">
            <div class="mnt-summary-item">
                <span class="mnt-summary-label"><?= __('admin.maintenance.config_title') ?></span>
                <span class="mnt-summary-value"><?= e($config['title'] ?? '-') ?></span>
            </div>
            <?php if (!empty($config['subtitle'])): ?>
            <div class="mnt-summary-item">
                <span class="mnt-summary-label"><?= __('admin.maintenance.subtitle_label') ?></span>
                <span class="mnt-summary-value"><?= e($config['subtitle']) ?></span>
            </div>
            <?php endif; ?>
            <div class="mnt-summary-item mnt-summary-item--full">
                <span class="mnt-summary-label"><?= __('admin.maintenance.config_message') ?></span>
                <span class="mnt-summary-value"><?= e($config['message'] ?? '-') ?></span>
            </div>
            <?php if (!empty($config['contact_info'])): ?>
            <div class="mnt-summary-item">
                <span class="mnt-summary-label"><?= __('admin.maintenance.contact_info_label') ?></span>
                <span class="mnt-summary-value"><?= e($config['contact_info']) ?></span>
            </div>
            <?php endif; ?>
            <?php if (!empty($config['return_info'])): ?>
            <div class="mnt-summary-item">
                <span class="mnt-summary-label"><?= __('admin.maintenance.return_info_label') ?></span>
                <span class="mnt-summary-value"><?= e($config['return_info']) ?></span>
            </div>
            <?php endif; ?>
            <div class="mnt-summary-item">
                <span class="mnt-summary-label"><?= __('admin.maintenance.config_site') ?></span>
                <span class="mnt-summary-value"><?= e($config['site_name'] ?? '-') ?></span>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <!-- ── Configuration Form ──────────────────────────────────────────────── -->
    <div class="form-card">
        <h4><?= $isActive ? __('admin.maintenance.update_config') : __('admin.maintenance.enable_title') ?></h4>
        <?php if ($isActive): ?>
        <p class="mnt-form-hint"><?= __('admin.maintenance.update_hint') ?></p>
        <?php else: ?>
        <p class="mnt-form-hint"><?= __('admin.maintenance.enable_text') ?></p>
        <?php endif; ?>

        <form method="POST" action="/admin/maintenance/enable" id="maintenanceForm" class="admin-form">
            <?= $csrf->field() ?>

            <!-- Section: Title & Message -->
            <div class="mnt-section">
                <div class="mnt-section-header">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                    </svg>
                    <span><?= __('admin.maintenance.config_title') ?> & <?= __('admin.maintenance.config_message') ?></span>
                </div>

                <div class="form-group">
                    <label for="mnt_title"><?= __('admin.maintenance.page_title_label') ?></label>
                    <input type="text"
                           id="mnt_title"
                           name="maintenance_title"
                           class="form-control"
                           value="<?= e($isActive ? ($config['title'] ?? __('admin.maintenance.page_title_default')) : __('admin.maintenance.page_title_default')) ?>"
                           maxlength="120"
                           placeholder="<?= __('admin.maintenance.page_title_default') ?>">
                    <p class="form-help"><?= __('admin.maintenance.title_help') ?></p>
                </div>

                <div class="form-group">
                    <label for="mnt_subtitle"><?= __('admin.maintenance.subtitle_label') ?></label>
                    <input type="text"
                           id="mnt_subtitle"
                           name="maintenance_subtitle"
                           class="form-control"
                           value="<?= e($isActive ? ($config['subtitle'] ?? '') : '') ?>"
                           maxlength="200"
                           placeholder="<?= __('admin.maintenance.subtitle_placeholder') ?>">
                    <p class="form-help"><?= __('admin.maintenance.subtitle_help') ?></p>
                </div>

                <div class="form-group">
                    <label for="mnt_message"><?= __('admin.maintenance.message_label') ?></label>
                    <textarea id="mnt_message"
                              name="maintenance_message"
                              class="form-control"
                              rows="3"
                              maxlength="500"
                              placeholder="<?= __('admin.maintenance.message_default') ?>"><?= e($isActive ? ($config['message'] ?? __('admin.maintenance.message_default')) : __('admin.maintenance.message_default')) ?></textarea>
                    <p class="form-help"><?= __('admin.maintenance.message_help') ?></p>
                </div>
            </div>

            <!-- Section: Contact & Return -->
            <div class="mnt-section">
                <div class="mnt-section-header">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                        <polyline points="22,6 12,13 2,6"/>
                    </svg>
                    <span><?= __('admin.maintenance.contact_info_label') ?> & <?= __('admin.maintenance.return_info_label') ?></span>
                </div>

                <div class="mnt-form-row">
                    <div class="form-group">
                        <label for="mnt_contact"><?= __('admin.maintenance.contact_info_label') ?></label>
                        <input type="text"
                               id="mnt_contact"
                               name="maintenance_contact_info"
                               class="form-control"
                               value="<?= e($isActive ? ($config['contact_info'] ?? '') : '') ?>"
                               maxlength="150"
                               placeholder="<?= __('admin.maintenance.contact_info_placeholder') ?>">
                        <p class="form-help"><?= __('admin.maintenance.contact_info_help') ?></p>
                    </div>

                    <div class="form-group">
                        <label for="mnt_return"><?= __('admin.maintenance.return_info_label') ?></label>
                        <input type="text"
                               id="mnt_return"
                               name="maintenance_return_info"
                               class="form-control"
                               value="<?= e($isActive ? ($config['return_info'] ?? '') : '') ?>"
                               maxlength="100"
                               placeholder="<?= __('admin.maintenance.return_info_placeholder') ?>">
                        <p class="form-help"><?= __('admin.maintenance.return_info_help') ?></p>
                    </div>
                </div>
            </div>

            <!-- Section: Media (Background Image & Custom Logo) -->
            <div class="mnt-section">
                <div class="mnt-section-header">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <circle cx="8.5" cy="8.5" r="1.5"/>
                        <polyline points="21 15 16 10 5 21"/>
                    </svg>
                    <span><?= __('admin.maintenance.media_section') ?></span>
                </div>

                <div class="mnt-form-row">
                    <div class="form-group">
                        <label for="mnt_bg_image_input"><?= __('admin.maintenance.background_image_label') ?></label>
                        <div class="iw-media-picker-field" data-type="image">
                            <div class="iw-mpf-input-row">
                                <input type="text"
                                       name="maintenance_background_image"
                                       id="mnt_bg_image_input"
                                       value="<?= e($isActive ? ($config['background_image'] ?? '') : '') ?>"
                                       placeholder="<?= __('admin.maintenance.background_image_placeholder') ?>"
                                       class="iw-mpf-text-input">
                                <button type="button" class="btn btn-secondary btn-sm iw-mpf-pick-btn"
                                        data-input="mnt_bg_image_input"
                                        data-preview="mnt_bg_image_preview"
                                        data-picker-type="image"
                                        title="<?= __('admin.maintenance.media_pick') ?>">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
                                    </svg>
                                    <?= __('admin.maintenance.media_pick') ?>
                                </button>
                            </div>
                            <?php $bgVal = $isActive ? ($config['background_image'] ?? '') : ''; ?>
                            <div class="iw-mpf-preview-wrap" id="mnt_bg_image_preview"
                                 style="<?= !empty($bgVal) ? '' : 'display:none;' ?>margin-top:.5rem;">
                                <?php if (!empty($bgVal)): ?>
                                <img src="/uploads/<?= e($bgVal) ?>" alt="<?= __('admin.maintenance.background_image_label') ?>" style="max-height:80px;border-radius:4px;display:block;">
                                <?php endif; ?>
                            </div>
                        </div>
                        <p class="form-help"><?= __('admin.maintenance.background_image_help') ?></p>
                    </div>

                    <div class="form-group">
                        <label for="mnt_custom_logo_input"><?= __('admin.maintenance.custom_logo_label') ?></label>
                        <div class="iw-media-picker-field" data-type="image">
                            <div class="iw-mpf-input-row">
                                <input type="text"
                                       name="maintenance_custom_logo"
                                       id="mnt_custom_logo_input"
                                       value="<?= e($isActive ? ($config['custom_logo'] ?? '') : '') ?>"
                                       placeholder="<?= __('admin.maintenance.custom_logo_placeholder') ?>"
                                       class="iw-mpf-text-input">
                                <button type="button" class="btn btn-secondary btn-sm iw-mpf-pick-btn"
                                        data-input="mnt_custom_logo_input"
                                        data-preview="mnt_custom_logo_preview"
                                        data-picker-type="image"
                                        title="<?= __('admin.maintenance.media_pick') ?>">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
                                    </svg>
                                    <?= __('admin.maintenance.media_pick') ?>
                                </button>
                            </div>
                            <?php $logoVal = $isActive ? ($config['custom_logo'] ?? '') : ''; ?>
                            <div class="iw-mpf-preview-wrap" id="mnt_custom_logo_preview"
                                 style="<?= !empty($logoVal) ? '' : 'display:none;' ?>margin-top:.5rem;">
                                <?php if (!empty($logoVal)): ?>
                                <img src="/uploads/<?= e($logoVal) ?>" alt="<?= __('admin.maintenance.custom_logo_label') ?>" style="max-height:80px;border-radius:4px;display:block;">
                                <?php endif; ?>
                            </div>
                        </div>
                        <p class="form-help"><?= __('admin.maintenance.custom_logo_help') ?></p>
                    </div>
                </div>
            </div>

            <!-- Section: Options -->
            <div class="mnt-section">
                <div class="mnt-section-header">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="3"/>
                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
                    </svg>
                    <span><?= __('admin.nav.settings') ?></span>
                </div>

                <div class="mnt-options">
                    <label class="mnt-option">
                        <input type="checkbox"
                               name="maintenance_show_logo"
                               value="1"
                               <?php
                               if ($isActive) {
                                   echo ($config['show_logo'] ?? true) ? 'checked' : '';
                               } else {
                                   echo 'checked';
                               }
                               ?>>
                        <div class="mnt-option__body">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                                <circle cx="8.5" cy="8.5" r="1.5"/>
                                <polyline points="21 15 16 10 5 21"/>
                            </svg>
                            <div>
                                <strong><?= __('admin.maintenance.show_logo_label') ?></strong>
                                <small><?= __('admin.maintenance.show_logo_help') ?></small>
                            </div>
                        </div>
                    </label>

                    <label class="mnt-option">
                        <input type="checkbox"
                               name="maintenance_admin_hint"
                               value="1"
                               <?php
                               if ($isActive) {
                                   echo ($config['admin_hint'] ?? false) ? 'checked' : '';
                               }
                               // When inactive (fresh form): unchecked by default
                               ?>>
                        <div class="mnt-option__body">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                            </svg>
                            <div>
                                <strong><?= __('admin.maintenance.admin_hint_label') ?></strong>
                                <small><?= __('admin.maintenance.admin_hint_help') ?></small>
                            </div>
                        </div>
                    </label>
                </div>
            </div>

            <!-- Action Bar -->
            <div class="mnt-action-bar">
                <?php if (!$isActive): ?>
                <button type="button" class="btn btn-secondary" onclick="showMaintenancePreview()">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                        <circle cx="12" cy="12" r="3"/>
                    </svg>
                    <?= __('admin.maintenance.preview_btn') ?>
                </button>
                <button type="submit" class="btn btn-warning"
                        onclick="return confirm('<?= __('admin.maintenance.confirm_enable') ?>')">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                        <line x1="12" y1="9" x2="12" y2="13"/>
                        <line x1="12" y1="17" x2="12.01" y2="17"/>
                    </svg>
                    <?= __('admin.maintenance.enable_btn') ?>
                </button>
                <?php else: ?>
                <button type="submit" class="btn btn-primary">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                        <polyline points="17 21 17 13 7 13 7 21"/>
                        <polyline points="7 3 7 8 15 8"/>
                    </svg>
                    <?= __('admin.maintenance.update_btn') ?>
                </button>
                <?php endif; ?>
            </div>
        </form>
    </div>

</div>

<!-- Preview Modal -->
<div class="mnt-preview-modal" id="maintenancePreviewModal" style="display:none;">
    <div class="mnt-preview-modal__backdrop" onclick="closeMaintenancePreview()"></div>
    <div class="mnt-preview-modal__container">
        <div class="mnt-preview-modal__header">
            <strong><?= __('admin.maintenance.preview_btn') ?></strong>
            <button type="button" onclick="closeMaintenancePreview()" class="mnt-preview-modal__close">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"/>
                    <line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
            </button>
        </div>
        <div class="mnt-preview-modal__body">
            <iframe id="maintenancePreviewFrame" class="mnt-preview-modal__frame"></iframe>
        </div>
    </div>
</div>

<style>
/* ── Maintenance Admin: Status Banner ─────────────────────────────────────── */
.mnt-status-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    border-left: 4px solid;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-xs);
}
.mnt-status-banner__icon {
    flex-shrink: 0;
    margin-top: 1px;
}
.mnt-status-banner__text {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1;
}
.mnt-status-banner__text strong {
    font-size: .9375rem;
}
.mnt-status-banner__text span {
    font-size: .85rem;
    opacity: .85;
}
.mnt-status-banner__text code {
    font-size: .8rem;
    background: rgba(0,0,0,.06);
    padding: .1rem .35rem;
    border-radius: 3px;
}
.mnt-status-banner__meta {
    font-size: .8rem;
    opacity: .7;
    white-space: nowrap;
    align-self: center;
}

/* Active */
.mnt-status-banner--active {
    background: #fffbeb;
    border-left-color: var(--admin-warning);
    color: #92400e;
}
/* Inactive */
.mnt-status-banner--inactive {
    background: #f0fdf4;
    border-left-color: var(--admin-success);
    color: #065f46;
}
/* Info */
.mnt-status-banner--info {
    background: #eff6ff;
    border-left-color: var(--admin-primary);
    color: #1e40af;
}

/* ── Active Controls ──────────────────────────────────────────────────────── */
.mnt-active-controls {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.mnt-active-controls .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.mnt-disable-form {
    margin: 0;
}

/* ── Config Summary ───────────────────────────────────────────────────────── */
.mnt-summary-card {
    margin-bottom: 1.5rem;
}
.mnt-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.mnt-summary-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .5rem .75rem;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-100);
}
.mnt-summary-item--full {
    grid-column: 1 / -1;
}
.mnt-summary-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gray-500);
}
.mnt-summary-value {
    font-size: .875rem;
    color: var(--gray-800);
}

/* ── Form Sections ────────────────────────────────────────────────────────── */
.mnt-form-hint {
    font-size: .875rem;
    color: var(--gray-500);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}
.mnt-section {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}
.mnt-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}
.mnt-section-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gray-500);
    margin-bottom: 1.25rem;
}
.mnt-section-header svg {
    color: var(--admin-primary);
    opacity: .7;
}

.mnt-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

/* ── Options (Checkboxes) ─────────────────────────────────────────────────── */
.mnt-options {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.mnt-option {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    cursor: pointer;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    transition: all var(--transition);
}
.mnt-option:hover {
    background: #fff;
    border-color: var(--gray-300);
    box-shadow: var(--shadow-xs);
}
.mnt-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--admin-primary);
}
.mnt-option__body {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    flex: 1;
}
.mnt-option__body svg {
    flex-shrink: 0;
    color: var(--gray-400);
    margin-top: 1px;
}
.mnt-option__body div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.mnt-option__body strong {
    font-size: .875rem;
    color: var(--gray-800);
}
.mnt-option__body small {
    font-size: .8rem;
    color: var(--gray-500);
    line-height: 1.4;
}

/* ── Action Bar ───────────────────────────────────────────────────────────── */
.mnt-action-bar {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-200);
}
.mnt-action-bar .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* ── Preview Modal ────────────────────────────────────────────────────────── */
.mnt-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mnt-preview-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(2px);
}
.mnt-preview-modal__container {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 840px;
    height: 82vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.mnt-preview-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}
.mnt-preview-modal__header strong {
    font-size: .9rem;
    color: var(--gray-700);
}
.mnt-preview-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-500);
    padding: .25rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mnt-preview-modal__close:hover {
    color: var(--gray-800);
    background: var(--gray-200);
}
.mnt-preview-modal__body { flex: 1; }
.mnt-preview-modal__frame {
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .mnt-form-row {
        grid-template-columns: 1fr;
    }
    .mnt-summary-grid {
        grid-template-columns: 1fr;
    }
    .mnt-action-bar {
        flex-direction: column;
    }
    .mnt-action-bar .btn {
        width: 100%;
        justify-content: center;
    }
    .mnt-active-controls {
        flex-direction: column;
    }
    .mnt-status-banner {
        flex-wrap: wrap;
    }
    .mnt-status-banner__meta {
        width: 100%;
        text-align: left;
    }
}
</style>

<script>
function showMaintenancePreview() {
    var form = document.getElementById('maintenanceForm');
    if (!form) return;

    var params = new URLSearchParams();
    params.set('preview', '1');

    var fields = {
        'maintenance_title': 'title',
        'maintenance_subtitle': 'subtitle',
        'maintenance_message': 'message',
        'maintenance_contact_info': 'contact_info',
        'maintenance_return_info': 'return_info',
        'maintenance_background_image': 'background_image',
        'maintenance_custom_logo': 'custom_logo'
    };

    for (var name in fields) {
        var el = form.querySelector('[name="' + name + '"]');
        if (el && el.value) params.set(fields[name], el.value);
    }

    var logoEl = form.querySelector('[name="maintenance_show_logo"]');
    var hintEl = form.querySelector('[name="maintenance_admin_hint"]');
    if (logoEl && logoEl.checked) params.set('show_logo', '1');
    if (hintEl && hintEl.checked) params.set('admin_hint', '1');

    var modal = document.getElementById('maintenancePreviewModal');
    var frame = document.getElementById('maintenancePreviewFrame');
    frame.src = '/admin/maintenance/preview?' + params.toString();
    modal.style.display = 'flex';
}

function closeMaintenancePreview() {
    var modal = document.getElementById('maintenancePreviewModal');
    modal.style.display = 'none';
    var frame = document.getElementById('maintenancePreviewFrame');
    frame.src = 'about:blank';
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeMaintenancePreview();
});
</script>

<?php $content = ob_get_clean(); include dirname(__DIR__) . '/layouts/admin.php'; ?>
