<!-- Navigation -->
<nav class="navbar">
    <div class="navbar-container">
        <div class="navbar-brand">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
            </svg>
            <h1><?php esc_html_e('مدیریت پترن پیامکی','woodmartplus') ?></h1>
        </div>
        <div class="navbar-nav">
            <button id="navList" class="nav-btn active">
                <span><?php esc_html_e('لیست پترن‌ها','woodmartplus') ?></span>
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
                </svg>
            </button>
            <button id="navCreate" class="nav-btn">
                <span><?php esc_html_e('ایجاد پترن','woodmartplus') ?></span>
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
            </button>
        </div>
    </div>
</nav>
<?php if( $this->pattern_helper->is_onlinepayamak() ) : ?>
<!-- Page 1: Pattern List -->
<div id="listPage" class="page active">
    <div class="container-pattern-start">
        <!-- Header -->
        <div class="page-header">
            <div>
                <h2 class="page-title"><?php esc_html_e('لیست پترن‌ها','woodmartplus') ?></h2>
                <p class="page-subtitle"><?php esc_html_e('مدیریت و مشاهده تمام پترن‌های پیامکی','woodmartplus') ?></p>
            </div>
            <div>
                <button  class="create_pattern--now btn btn-primary">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    <?php esc_html_e('ایجاد پترن جدید','woodmartplus'); ?>
                </button>
                
                <a href="<?php echo add_query_arg([
                    'update_pattern_system' => 1 
                ],admin_url('admin.php?page=pattern_system')) ?>" class="update_pattern--now btn btn-primary">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    <?php esc_html_e('بروزرسانی پترن ها','woodmartplus') ?>
                </a>
            </div>
            
        </div>
        <div class="card-pattern-start table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th><?php esc_html_e('عنوان','woodmartplus') ?></th>
                        <th><?php esc_html_e('نوع','woodmartplus') ?></th>
                        <th><?php esc_html_e('کد پترن','woodmartplus') ?></th>
                        <th><?php esc_html_e('متغیرها','woodmartplus') ?></th>
                        <th><?php esc_html_e('تاریخ بروزرسانی','woodmartplus') ?></th>
                        <th><?php esc_html_e('اشتراکی','woodmartplus') ?></th>
                        <th><?php esc_html_e('وضعیت','woodmartplus') ?></th>
                        <th style="text-align: center;"><?php esc_html_e('عملیات','woodmartplus'); ?></th>
                    </tr>
                </thead>
                <tbody id="patternTableBody">
                </tbody>
            </table>
        </div>

        <!-- Mobile Cards -->
        <div class="mobile-cards" id="patternCards">
            <!-- Cards -->
        </div>

        <!-- Pagination -->
        <div class="card-pattern-start" style="margin-top: 24px;">
            <div class="pagination">
                <div class="pagination-buttons">
                    <?php echo $this->get_patterns->generate_pagination(); ?>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Page 2: Create Pattern -->
<div id="createPage" class="page">
    <div class="container-pattern-start container-sm">
        <div class="card-pattern-start">
            <div class="card-body">
                <div class="form-header">
                    <div class="form-icon">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                    </div>
                    <div>
                        <h2 class="form-title"><?php esc_html_e('ایجاد پترن جدید','woodmartplus') ?></h2>
                        <p class="form-subtitle"><?php esc_html_e('اطلاعات پترن پیامکی را وارد کنید','woodmartplus') ?></p>
                    </div>
                </div>

                <form id="patternForm">
                    <!-- Pattern Title -->
                    <div class="form-group">
                        <label class="form-label">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                            </svg>
                            <?php esc_html_e('عنوان پترن','woodmartplus') ?>
                        </label>
                        <input type="text" id="patternTitle" class="form-control" placeholder="مثال: پترن خوش‌آمدگویی">
                    </div>
                    <!-- Variables -->
                    <div class="form-group">
                        <label class="form-label">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                            </svg>
                            <?php esc_html_e('متغیرها','woodmartplus') ?>
                        </label>
                        <div class="variables-section">
                            <div id="variablesList" class="variables-list">
                                <span class="no-variables" id="noVarText"><?php esc_html_e('هنوز متغیری اضافه نشده است','woodmartplus') ?></span>
                            </div>
                            <button type="button" class="add-variable-btn">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                                </svg>
                                <?php esc_html_e('افزودن متغیر جدید','woodmartplus'); ?>
                            </button>
                        </div>
                    </div>

                    <!-- Pattern Text -->
                    <div class="form-group">
                        <label class="form-label">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            <?php esc_html_e('متن پترن','woodmartplus') ?>
                        </label>
                        <div class="textarea-wrapper">
                            <textarea id="patternText" class="form-control" rows="5" placeholder="متن پیامک خود را وارد کنید. برای استفاده از متغیرها از {نام_متغیر} استفاده کنید." style="padding-bottom: 35px;"></textarea>
                            <span class="char-counter"><span id="charCount">0</span>/160 کاراکتر</span>
                        </div>
                        <p class="form-hint"><?php esc_html_e('💡 نکته: برای استفاده از متغیرها روی آن‌ها کلیک کنید','woodmartplus') ?></p>
                        <p class="form-hint"><?php esc_html_e('💡 با رعایت شروط زیر می‌توانید به‌جای نام برند، از لینک وب‌سایت/اپلیکیشن در متن پترن استفاده کنید:
                        فعال‌بودن و در دسترس‌بودن لینک
                        مطابقت لینک با موضوع پترن و نام مجموعه
                        عدم تبدیل لینک به متغیر
                        داشتن گواهی‌نامه SSL/TLS (دسترسی از HTTPS)
                        توجه! استفاده از نام مجموعه، آدرس وب‌سایت و اپلیکیشن تحت عنوان متغیر ممنوع است.','woodmartplus'); ?></p>
                        
                    </div>

                    <!-- Description -->
                    <div class="form-group">
                        <label class="form-label">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
                            </svg>
                            <?php esc_html_e('توضیحات','woodmartplus'); ?>
                        </label>
                        <textarea id="patternDescription" class="form-control" rows="3" placeholder="<?php esc_html_e('توضیحات مربوط به این پترن را وارد کنید...','woodmartplus') ?>"></textarea>
                    </div>

                    <!-- Type & Website -->
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
                                </svg>
                                <?php esc_html_e('وبسایت','woodmartplus') ?>
                            </label>
                            <input type="url" id="patternWebsite" class="form-control" placeholder="https://example.com" dir="ltr">
                        </div>
                    </div>
                    <!-- Options -->
                    <!-- <div class="form-group">
                        <div class="options-section">
                            <label class="checkbox-label">
                                <input type="checkbox" id="isShared">
                                پترن اشتراکی
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox" id="isActive" checked>
                                فعال
                            </label>
                        </div>
                    </div> -->

                    <!-- Actions -->
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <?php esc_html_e('ذخیره پترن','woodmartplus'); ?>
                        </button>
                        <button type="button" class="leave-from-add-pattern btn btn-secondary">
                            <?php esc_html_e('انصراف','woodmartplus'); ?>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Variable Modal -->
<div id="variableModal" class="modal-overlay">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title"><?php esc_html_e('افزودن متغیر جدید','woodmartplus') ?></h3>
            <button onclick="closeVariableModal()" class="modal-close">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label"><?php esc_html_e('نام متغیر','woodmartplus') ?></label>
                <input type="text" id="variableName" class="form-control" placeholder="<?php esc_html_e('مثال : %order_id%','woodmartplus'); ?>">
            </div>
            <div class="form-group" style="margin-bottom: 0;">
                <label class="form-label"><?php esc_html_e('نوع متغیر','woodmartplus') ?></label>
                <select id="variableType" class="form-control">
                    <option value="string"><?php esc_html_e('متن','woodmartplus'); ?></option>
                    <option value="integer"><?php esc_html_e('عدد','woodmartplus'); ?></option>
                </select>
            </div>
        </div>
        <div class="modal-footer">
            <button  class="add-variable-from-modal btn btn-primary"><?php esc_html_e('افزودن','woodmartplus'); ?></button>
            <button  class="close-variable-modal btn btn-secondary"><?php esc_html_e('انصراف','woodmartplus'); ?></button>
        </div>
    </div>
</div>

<!-- Details Modal -->
<div id="detailsModal" class="modal-overlay">
    <div class="modal modal-lg">
        <div class="modal-header">
            <h3 class="modal-title"><?php esc_html_e('جزئیات پترن','woodmartplus') ?></h3>
            <button class="modal-close">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div class="modal-body" id="detailsContent">
            <!-- Details -->
        </div>
    </div>
</div>

<!-- Toast -->
<div id="toast" class="toast success">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
    </svg>
    <span id="toastMessage"><?php esc_html_e('عملیات با موفقیت انجام شد','woodmartplus'); ?></span>
</div>

<?php else: ?>
    <div id="listPage">
         <div class="container-pattern-start">
              <div class="card-pattern-start">
                    <p><?php printf(__('برای استفاده از پنل پیامکی آنلاین پیامک از<a href="%s" target="_blank"> اینجا</a> اقدام کنید','woodmartplus'),'https://onlinepayamak.com'); ?></p>
                    <p><?php esc_html_e('برای کار کردن با این سرویس میبایست از اپراتور (آنلاین پیامک) استفاده کنید و همچنین تمام اطلاعات مورد نیاز را قرار دهید (حتما کلید دسترسی باید قرار بگیرد)','woodmartplus'); ?></p>
              </div>
         </div>
    </div>
<?php endif; ?>