<?php
/**
 * CMS Theme Management
 */
?>
<div class="container-fluid py-4" dir="rtl">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold text-primary urdu-bold mb-1">تھیمز کا انتظام (Theme Management)</h2>
            <p class="text-muted urdu-regular fs-5">ویب سائٹ کا ڈیزائن تبدیل کریں یا نیا تھیم بنائیں</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-primary px-4 py-2 rounded-3 urdu-regular fs-5" id="btnAiCreator">
                <i class="bi bi-robot me-2"></i> AI تھیم کری ایٹر
            </button>
            <button class="btn btn-outline-primary px-4 py-2 rounded-3 urdu-regular fs-5" id="btnUploadTheme">
                <i class="bi bi-upload me-2"></i> تھیم اپلوڈ کریں
            </button>
        </div>
    </div>

    <div class="row g-4" id="themesGrid">
        <!-- Loaded via AJAX -->
    </div>
</div>

<!-- AI Creator Modal -->
<div class="modal fade" id="aiCreatorModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 rounded-4 overflow-hidden">
            <div class="modal-header bg-primary text-white py-3">
                <h5 class="modal-title urdu-bold">AI تھیم کری ایٹر (Wizard)</h5>
                <button type="button" class="btn-close btn-close-white ms-0 me-auto" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div class="progress rounded-0" style="height: 5px;">
                    <div class="progress-bar" id="aiProgress" style="width: 20%;"></div>
                </div>

                <form id="aiThemeForm">
                    <div class="p-4">
                        <!-- Step 1: Basic Info -->
                        <div class="ai-step" id="step1">
                            <h6 class="urdu-bold mb-3">مرحلہ 1: تھیم کی بنیادی معلومات</h6>
                            <div class="mb-3 text-end">
                                <label class="form-label urdu-regular">تھیم کا نام (Theme Name)</label>
                                <input type="text" class="form-control" name="theme_name" required
                                    placeholder="مثلاً: My Modern Theme">
                            </div>
                        </div>

                        <!-- Step 2: Colors -->
                        <div class="ai-step d-none" id="step2">
                            <h6 class="urdu-bold mb-3">مرحلہ 2: کلر اسکیم (Color Scheme)</h6>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <div class="card p-3 text-center border-0 color-opt" data-color="blue" style="cursor:pointer">
                                        <div class="rounded-circle mx-auto mb-2" style="width:40px;height:40px;background:#0d6efd"></div>
                                        <span class="small">Blue (Default)</span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card p-3 text-center border-0 color-opt" data-color="green" style="cursor:pointer">
                                        <div class="rounded-circle mx-auto mb-2" style="width:40px;height:40px;background:#198754"></div>
                                        <span class="small">Emerald Green</span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card p-3 text-center border-0 color-opt" data-color="dark" style="cursor:pointer">
                                        <div class="rounded-circle mx-auto mb-2" style="width:40px;height:40px;background:#212529"></div>
                                        <span class="small">Elegant Dark</span>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="color_scheme" value="blue">
                        </div>

                        <!-- Step 3: Layout -->
                        <div class="ai-step d-none" id="step3">
                            <h6 class="urdu-bold mb-3">مرحلہ 3: لے آؤٹ اسٹائل (Layout Style)</h6>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-check card p-3">
                                        <input class="form-check-input" type="radio" name="layout" value="wide" checked>
                                        <label class="form-check-label urdu-regular">مکمل چوڑائی (Full Width)</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check card p-3">
                                        <input class="form-check-input" type="radio" name="layout" value="boxed">
                                        <label class="form-check-label urdu-regular">باکسڈ لے آؤٹ (Boxed Layout)</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer bg-light border-top d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary urdu-regular d-none" id="btnAiPrev">پیچھے
                            (Prev)</button>
                        <button type="button" class="btn btn-primary urdu-regular" id="btnAiNext">آگے (Next)</button>
                        <button type="submit" class="btn btn-success urdu-bold d-none" id="btnAiGenerate">تھیم تیار کریں
                            (Generate)</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="assets/js/cms_themes.js?v=<?php echo time(); ?>"></script>