<?php
$titles = __('error_titles', true);
$bodies = __('error_bodies', true);

// Current values
$brandColor = isset($tpl['option_arr']['o_brand_color']) ? $tpl['option_arr']['o_brand_color'] : '#ff6600';
$accentColor = isset($tpl['option_arr']['o_accent_color']) ? $tpl['option_arr']['o_accent_color'] : '#f3f4f6';
$textColor = isset($tpl['option_arr']['o_text_color']) ? $tpl['option_arr']['o_text_color'] : '#111827';
$bgColor = isset($tpl['option_arr']['o_background_color']) ? $tpl['option_arr']['o_background_color'] : '#ffffff';
$priceColor = isset($tpl['option_arr']['o_price_color']) ? $tpl['option_arr']['o_price_color'] : '#ff6600';
$pageBgColor = isset($tpl['option_arr']['o_page_background_color']) ? $tpl['option_arr']['o_page_background_color'] : '#ffffff';
$fontFamily = isset($tpl['option_arr']['o_font_family']) ? $tpl['option_arr']['o_font_family'] : '';
$colorPalette = isset($tpl['option_arr']['o_color_palette']) ? $tpl['option_arr']['o_color_palette'] : '0';
?>

<style>
.pj-theme-page { display: flex; gap: 24px; padding: 20px; min-height: calc(100vh - 120px); }
.pj-theme-sidebar { width: 380px; flex-shrink: 0; overflow-y: auto; max-height: calc(100vh - 140px); padding-right: 8px; }
.pj-theme-preview { flex: 1; min-width: 0; }
.pj-theme-preview iframe {
    width: 100%;
    height: calc(100vh - 180px);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Section */
.pj-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.pj-section-title { font-size: 14px; font-weight: 600; color: #1f2937; margin: 0 0 16px 0; text-transform: uppercase; letter-spacing: 0.5px; }

/* Palette cards */
.pj-palettes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pj-palette-card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: all 0.2s; position: relative; }
.pj-palette-card:hover { border-color: #bbb; transform: translateY(-1px); }
.pj-palette-card.active { border-color: var(--admin-primary, #374151); box-shadow: 0 0 0 3px var(--admin-primary-lighter, rgba(55,65,81,.10)); }
.pj-palette-card.active::after { content: "\f00c"; font-family: FontAwesome; position: absolute; top: 6px; right: 8px; color: var(--admin-primary, #374151); font-size: 12px; }
.pj-palette-name { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 6px; }
.pj-palette-swatches { display: flex; gap: 4px; }
.pj-palette-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.08); }

/* Color pickers */
.pj-color-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pj-color-label { font-size: 13px; font-weight: 500; color: #4b5563; width: 120px; flex-shrink: 0; }
.pj-color-input { width: 42px; height: 42px; border: 2px solid #e5e7eb; border-radius: 6px; padding: 2px; cursor: pointer; background: #fff; }
.pj-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.pj-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.pj-color-hex { width: 90px; height: 36px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 0 8px; font-family: monospace; font-size: 13px; color: #333; text-transform: uppercase; }
.pj-color-reset { background: none; border: none; color: #999; cursor: pointer; font-size: 14px; padding: 4px 8px; }
.pj-color-reset:hover { color: #e74c3c; }

/* Font select */
.pj-font-select { width: 100%; height: 38px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 0 10px; font-size: 13px; color: #333; background: #fff; }

/* Save button */
.pj-save-bar { margin-top: 12px; }
.pj-btn-save { cursor: pointer; }
.pj-btn-save:disabled { opacity: 0.6; cursor: not-allowed; }
.pj-save-msg { text-align: center; font-size: 13px; color: #0f9d58; margin-top: 8px; display: none; }

/* Randomizer */
.pj-btn-randomize { width: 100%; padding: 10px; border: 2px dashed #cbd5e1; border-radius: 6px; background: #f8fafc; color: var(--admin-primary, #374151); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s; }
.pj-btn-randomize:hover { border-color: var(--admin-primary, #374151); background: var(--admin-primary-lighter, rgba(55,65,81,.10)); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10); }
.pj-btn-randomize:active { transform: translateY(0); }
.pj-btn-randomize.pj-spinning i { animation: pj-spin-random 0.5s ease-out; }
@keyframes pj-spin-random { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Device preview */
.pj-device-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pj-device-btn { background: none; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px 12px; cursor: pointer; color: #666; font-size: 14px; }
.pj-device-btn.active { border-color: var(--admin-primary, #374151); color: var(--admin-primary, #374151); background: var(--admin-primary-lighter, rgba(55,65,81,.10)); }
.pj-device-btn:hover { border-color: #bbb; }
</style>

<div class="row border-bottom bar-top">
    <div class="col-1of3">
        <a target="_blank" href="<?php echo $_SERVER['PHP_SELF']; ?>?controller=pjBaseLocale&amp;action=pjActionLabels" class="btn btn-secondary"><i class="fa fa-refresh m-r-xs"></i> <?php __('script_change_labels') ?></a>
    </div>
    <div class="col-1of3 text-center">
        <a class="device-view active" href="#" data-device="desktop"><i class="fa fa-desktop"></i></a>
        <div class="device-view-holder">
            <a class="device-view" href="#" data-device="tablet" data-orientation="portrait"><i class="fa fa-tablet"></i></a>
            <a class="device-view device-view-rotate" href="#" data-device="tablet" data-orientation="landscape"><i class="fa fa-tablet"></i></a>
        </div>
        <div class="device-view-holder">
            <a class="device-view" href="#" data-device="phone" data-orientation="portrait"><i class="fa fa-mobile phone"></i></a>
            <a class="device-view device-view-rotate" href="#" data-device="phone" data-orientation="landscape"><i class="fa fa-mobile phone"></i></a>
        </div>
    </div>
    <div class="col-1of3 text-right">
        <a href="preview.php?locale=<?php echo $controller->getLocaleId();?>&hide=0" class="btn btn-secondary open-new-window" target="_blank"><i class="fa fa-eye m-r-xs"></i> <?php __('script_preview_your_website') ?></a>
        <a href="<?php echo $_SERVER['PHP_SELF']; ?>?controller=pjAdminOptions&amp;action=pjActionInstall" class="btn btn-secondary"><i class="fa fa-wrench m-r-xs"></i> <?php __('script_install_your_website') ?></a>
    </div>
</div>

<div class="pj-theme-page">
    <!-- Sidebar -->
    <div class="pj-theme-sidebar">

        <!-- Randomizer -->
        <div class="pj-section pj-randomizer-section">
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
                <h3 class="pj-section-title" style="margin-bottom: 0;"><i class="fa fa-magic m-r-xs"></i> Surprise me</h3>
                <label style="font-size: 12px; color: #888; cursor: pointer; user-select: none;">
                    <input type="checkbox" id="pjRandomFont" style="margin-right: 4px;"> include font
                </label>
            </div>
            <button type="button" class="pj-btn-randomize" id="pjRandomize">
                <i class="fa fa-random m-r-xs"></i> Generate random colors
            </button>
        </div>

        <!-- Palettes -->
        <div class="pj-section">
            <h3 class="pj-section-title"><i class="fa fa-paint-brush m-r-xs"></i> Color Palettes</h3>
            <div class="pj-palettes" id="pjPalettes">
                <!-- Palettes worden gevuld door JavaScript -->
            </div>
        </div>

        <!-- Color pickers -->
        <div class="pj-section">
            <h3 class="pj-section-title"><i class="fa fa-eyedropper m-r-xs"></i> Custom Colors</h3>

            <div class="pj-color-row">
                <span class="pj-color-label">Brand color</span>
                <input type="color" class="pj-color-input" id="brandColor" name="o_brand_color" value="<?php echo pjSanitize::html($brandColor); ?>">
                <input type="text" class="pj-color-hex" id="brandColorHex" value="<?php echo pjSanitize::html($brandColor); ?>" maxlength="7">
                <button type="button" class="pj-color-reset" data-target="brandColor" data-default="#ff6600" title="Reset"><i class="fa fa-undo"></i></button>
            </div>

            <div class="pj-color-row">
                <span class="pj-color-label">Accent color</span>
                <input type="color" class="pj-color-input" id="accentColor" name="o_accent_color" value="<?php echo pjSanitize::html($accentColor); ?>">
                <input type="text" class="pj-color-hex" id="accentColorHex" value="<?php echo pjSanitize::html($accentColor); ?>" maxlength="7">
                <button type="button" class="pj-color-reset" data-target="accentColor" data-default="#f3f4f6" title="Reset"><i class="fa fa-undo"></i></button>
            </div>

            <div class="pj-color-row">
                <span class="pj-color-label">Text color</span>
                <input type="color" class="pj-color-input" id="textColor" name="o_text_color" value="<?php echo pjSanitize::html($textColor); ?>">
                <input type="text" class="pj-color-hex" id="textColorHex" value="<?php echo pjSanitize::html($textColor); ?>" maxlength="7">
                <button type="button" class="pj-color-reset" data-target="textColor" data-default="#111827" title="Reset"><i class="fa fa-undo"></i></button>
            </div>

            <div class="pj-color-row">
                <span class="pj-color-label">Background</span>
                <input type="color" class="pj-color-input" id="bgColor" name="o_background_color" value="<?php echo pjSanitize::html($bgColor); ?>">
                <input type="text" class="pj-color-hex" id="bgColorHex" value="<?php echo pjSanitize::html($bgColor); ?>" maxlength="7">
                <button type="button" class="pj-color-reset" data-target="bgColor" data-default="#ffffff" title="Reset"><i class="fa fa-undo"></i></button>
            </div>

            <div class="pj-color-row">
                <span class="pj-color-label">Price color</span>
                <input type="color" class="pj-color-input" id="priceColor" name="o_price_color" value="<?php echo pjSanitize::html($priceColor); ?>">
                <input type="text" class="pj-color-hex" id="priceColorHex" value="<?php echo pjSanitize::html($priceColor); ?>" maxlength="7">
                <button type="button" class="pj-color-reset" data-target="priceColor" data-default="#ff6600" title="Reset"><i class="fa fa-undo"></i></button>
            </div>

            <div class="pj-color-row">
                <span class="pj-color-label">Page background</span>
                <input type="color" class="pj-color-input" id="pageBgColor" name="o_page_background_color" value="<?php echo pjSanitize::html($pageBgColor); ?>">
                <input type="text" class="pj-color-hex" id="pageBgColorHex" value="<?php echo pjSanitize::html($pageBgColor); ?>" maxlength="7">
                <button type="button" class="pj-color-reset" data-target="pageBgColor" data-default="#ffffff" title="Reset"><i class="fa fa-undo"></i></button>
            </div>
        </div>

        <!-- Font -->
        <div class="pj-section">
            <h3 class="pj-section-title"><i class="fa fa-font m-r-xs"></i> Font</h3>
            <select class="pj-font-select" id="fontFamily" name="o_font_family">
                <option value="">Use website font (default)</option>
                <option value="Inter"<?php echo $fontFamily === 'Inter' ? ' selected' : ''; ?>>Inter</option>
                <option value="Poppins"<?php echo $fontFamily === 'Poppins' ? ' selected' : ''; ?>>Poppins</option>
                <option value="Roboto"<?php echo $fontFamily === 'Roboto' ? ' selected' : ''; ?>>Roboto</option>
                <option value="Open Sans"<?php echo $fontFamily === 'Open Sans' ? ' selected' : ''; ?>>Open Sans</option>
                <option value="Lato"<?php echo $fontFamily === 'Lato' ? ' selected' : ''; ?>>Lato</option>
                <option value="Montserrat"<?php echo $fontFamily === 'Montserrat' ? ' selected' : ''; ?>>Montserrat</option>
                <option value="Nunito"<?php echo $fontFamily === 'Nunito' ? ' selected' : ''; ?>>Nunito</option>
                <option value="Raleway"<?php echo $fontFamily === 'Raleway' ? ' selected' : ''; ?>>Raleway</option>
                <option value="Source Sans 3"<?php echo $fontFamily === 'Source Sans 3' ? ' selected' : ''; ?>>Source Sans 3</option>
                <option value="DM Sans"<?php echo $fontFamily === 'DM Sans' ? ' selected' : ''; ?>>DM Sans</option>
            </select>
        </div>

        <!-- Save -->
        <div class="pj-save-bar">
            <button type="button" class="pj-btn-save btn btn-primary btn-sm" id="pjSaveTheme">
                <i class="fa fa-check m-r-xs"></i> Save
            </button>
            <div class="pj-save-msg" id="pjSaveMsg">Saved!</div>
        </div>

    </div>

    <!-- Preview -->
    <div class="pj-theme-preview">
        <div class="pj-device-bar">
            <button class="pj-device-btn active" data-width="100%" title="Desktop"><i class="fa fa-desktop"></i></button>
            <button class="pj-device-btn" data-width="768px" title="Tablet"><i class="fa fa-tablet"></i></button>
            <button class="pj-device-btn" data-width="375px" title="Mobile"><i class="fa fa-mobile"></i></button>
            <a href="preview.php?locale=<?php echo $controller->getLocaleId(); ?>&hide=0" target="_blank" class="pj-device-btn" style="margin-left: auto;" title="Open in new window"><i class="fa fa-external-link"></i></a>
        </div>
        <iframe id="pjPreviewFrame" src="preview.php?locale=<?php echo $controller->getLocaleId(); ?>&hide=0"></iframe>
    </div>
</div>

<input type="hidden" id="pjCurrentPalette" value="<?php echo pjSanitize::html($colorPalette); ?>">
<input type="hidden" id="pjSaveUrl" value="<?php echo $_SERVER['PHP_SELF']; ?>?controller=pjAdminOptions&action=pjActionSaveThemeColors">
<input type="hidden" id="pjThemeCsrfToken" value="<?php echo pjAppController::getCsrfToken(); ?>">
