{% extends 'base.html.twig' %}

{% block title %}نصب حسابیکس{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .installation-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .step-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .step-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .step-number {
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        .step-content {
            padding: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #333;
        }
        
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
        }
        
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
        
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .progress-bar {
            background: #f0f0f0;
            border-radius: 10px;
            height: 8px;
            margin: 20px 0;
            overflow: hidden;
        }
        
        .progress-fill {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100%;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .status-message {
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
            display: none;
        }
        
        .status-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .status-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .status-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        .step-hidden {
            display: none;
        }
        
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
{% endblock %}

{% block body %}
<div class="installation-container" data-controller="installation">
    <h1 class="text-center mb-4">نصب خودکار حسابیکس</h1>
    
    <div class="install-method-toggle" style="text-align:center; margin-bottom:20px;">
        <button class="btn" id="apiInstallBtn" onclick="showApiInstall()" style="margin-left:10px;">نصب خودکار (API)</button>
        <button class="btn" id="ftpInstallBtn" onclick="showFtpInstall()">نصب با FTP</button>
    </div>

    <div id="apiInstallSection">
        <div class="progress-bar">
            <div class="progress-fill" data-installation-target="progressFill"></div>
        </div>
        <!-- مرحله 1: اطلاعات هاست -->
        <div class="step-card" data-installation-target="step">
            <div class="step-header">
                <div>
                    <h3>مرحله 1: اطلاعات هاست</h3>
                    <p>اطلاعات اتصال به پنل هاست خود را وارد کنید</p>
                </div>
                <div class="step-number">1</div>
            </div>
            <div class="step-content">
                <div class="form-group">
                    <label class="form-label">نوع پنل</label>
                    <select class="form-control" data-installation-target="panelType">
                        <option value="cpanel">cPanel</option>
                        <option value="directadmin" selected>DirectAdmin</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">آدرس هاست</label>
                    <input type="text" class="form-control" data-installation-target="host" placeholder="example.com" value="cdn.hesabix.ir">
                </div>
                <div class="form-group">
                    <label class="form-label">نام کاربری</label>
                    <input type="text" class="form-control" data-installation-target="username" placeholder="نام کاربری پنل" value="cdnhes">
                </div>
                <div class="form-group">
                    <label class="form-label">رمز عبور</label>
                    <input type="password" class="form-control" data-installation-target="password" placeholder="رمز عبور پنل" value="RuYFFBkamH7MtN">
                </div>
                <div class="status-message" data-installation-target="status"></div>
                <button class="btn" data-action="click->installation#testConnection">
                    <span data-installation-target="buttonText">تست اتصال</span>
                    <span class="loading" data-installation-target="loading" style="display: none;"></span>
                </button>
            </div>
        </div>
        <!-- ادامه مراحل نصب API ... -->
    </div>

    <div id="ftpOption" class="step-hidden">
        <div id="ftpStep1">
            <div class="step-card" style="margin-top:15px;">
                <div class="step-header">
                    <div>
                        <h3>نصب با اطلاعات FTP</h3>
                        <p>در صورت عدم دسترسی به API، اطلاعات FTP هاست خود را وارد کنید</p>
                    </div>
                    <div class="step-number">FTP</div>
                </div>
                <div class="step-content">
                    <div class="form-group">
                        <label class="form-label">آدرس FTP</label>
                        <input type="text" class="form-control" id="ftpHost" placeholder="ftp.example.com">
                    </div>
                    <div class="form-group">
                        <label class="form-label">نام کاربری FTP</label>
                        <input type="text" class="form-control" id="ftpUsername" placeholder="نام کاربری FTP">
                    </div>
                    <div class="form-group">
                        <label class="form-label">رمز عبور FTP</label>
                        <input type="password" class="form-control" id="ftpPassword" placeholder="رمز عبور FTP">
                    </div>
                    <div class="form-group">
                        <label class="form-label">پورت FTP</label>
                        <input type="text" class="form-control" id="ftpPort" placeholder="21" value="21">
                    </div>
                    <div class="status-message status-info" style="margin-top:10px;display:block;">
                        <b>اطمینان امنیتی:</b> اطلاعات ورود شما فقط برای نصب استفاده می‌شود و به هیچ عنوان ذخیره نخواهد شد.
                    </div>
                    <button class="btn" id="ftpNextBtn" onclick="showFtpDbStep()">بعدی</button>
                </div>
            </div>
        </div>
        <div id="ftpStep2" class="step-hidden">
            <div class="step-card" style="margin-top:15px;">
                <div class="step-header">
                    <div>
                        <h3>اطلاعات دیتابیس</h3>
                        <p>لطفاً اطلاعات دیتابیس جدید را وارد کنید</p>
                    </div>
                    <div class="step-number">DB</div>
                </div>
                <div class="step-content">
                    <div class="form-group">
                        <label class="form-label">نام دیتابیس</label>
                        <input type="text" class="form-control" id="ftpDatabaseName" placeholder="hesabix_db">
                    </div>
                    <div class="form-group">
                        <label class="form-label">نام کاربری دیتابیس</label>
                        <input type="text" class="form-control" id="ftpDatabaseUser" placeholder="hesabix_user">
                    </div>
                    <div class="form-group">
                        <label class="form-label">رمز عبور دیتابیس</label>
                        <input type="password" class="form-control" id="ftpDatabasePassword" placeholder="رمز عبور قوی">
                    </div>
                    <div class="status-message status-info" style="margin-top:10px;display:block;">
                        <b>اطمینان امنیتی:</b> اطلاعات ورود شما فقط برای نصب استفاده می‌شود و به هیچ عنوان ذخیره نخواهد شد.
                    </div>
                    <button class="btn" onclick="startFtpInstall()">شروع نصب با FTP</button>
                </div>
            </div>
        </div>
        <div id="ftpStep3" class="step-hidden">
            <div class="step-card" style="margin-top:15px;">
                <div class="step-header">
                    <div>
                        <h3>نتیجه نصب</h3>
                    </div>
                    <div class="step-number">✓</div>
                </div>
                <div class="step-content">
                    <div id="ftpResultMsg" class="status-message status-info" style="margin-top:10px;display:block;"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- مرحله 2: انتخاب دامنه -->
    <div class="step-card step-hidden" data-installation-target="step">
        <div class="step-header">
            <div>
                <h3>مرحله 2: انتخاب دامنه</h3>
                <p>دامنه‌ای که می‌خواهید حسابیکس روی آن نصب شود را انتخاب کنید</p>
            </div>
            <div class="step-number">2</div>
        </div>
        <div class="step-content">
            <div class="form-group">
                <label class="form-label">دامنه</label>
                <select class="form-control" data-installation-target="domain">
                    <option value="">انتخاب کنید...</option>
                </select>
            </div>
            
            <div class="status-message" data-installation-target="status"></div>
            
            <button class="btn" data-action="click->installation#getDomainInfo">
                <span data-installation-target="buttonText">دریافت دامنه‌ها</span>
                <span class="loading" data-installation-target="loading" style="display: none;"></span>
            </button>
        </div>
    </div>
    
    <!-- مرحله 3: تنظیمات دیتابیس -->
    <div class="step-card step-hidden" data-installation-target="step">
        <div class="step-header">
            <div>
                <h3>مرحله 3: تنظیمات دیتابیس</h3>
                <p>اطلاعات دیتابیس جدید را وارد کنید</p>
            </div>
            <div class="step-number">3</div>
        </div>
        <div class="step-content">
            <div class="form-group">
                <label class="form-label">نام دیتابیس</label>
                <input type="text" class="form-control" data-installation-target="databaseName" placeholder="hesabix_db">
            </div>
            
            <div class="form-group">
                <label class="form-label">نام کاربری دیتابیس</label>
                <input type="text" class="form-control" data-installation-target="databaseUser" placeholder="hesabix_user">
            </div>
            
            <div class="form-group">
                <label class="form-label">رمز عبور دیتابیس</label>
                <input type="password" class="form-control" data-installation-target="databasePassword" placeholder="رمز عبور قوی">
            </div>
            
            <div class="status-message" data-installation-target="status"></div>
            
            <button class="btn" data-action="click->installation#createDatabase">
                <span data-installation-target="buttonText">ایجاد دیتابیس</span>
                <span class="loading" data-installation-target="loading" style="display: none;"></span>
            </button>
        </div>
    </div>
    
    <!-- مرحله 4: آپلود فایل‌ها -->
    <div class="step-card step-hidden" data-installation-target="step">
        <div class="step-header">
            <div>
                <h3>مرحله 4: آپلود فایل‌ها</h3>
                <p>فایل‌های حسابیکس در حال دانلود و آپلود هستند</p>
            </div>
            <div class="step-number">4</div>
        </div>
        <div class="step-content">
            <div class="status-message" data-installation-target="status"></div>
            
            <button class="btn" data-action="click->installation#uploadFiles">
                <span data-installation-target="buttonText">شروع آپلود</span>
                <span class="loading" data-installation-target="loading" style="display: none;"></span>
            </button>
        </div>
    </div>
    
    <!-- مرحله 5: تنظیمات نهایی -->
    <div class="step-card step-hidden" data-installation-target="step">
        <div class="step-header">
            <div>
                <h3>مرحله 5: تنظیمات نهایی</h3>
                <p>تنظیم فایل‌های پیکربندی و نهایی‌سازی نصب</p>
            </div>
            <div class="step-number">5</div>
        </div>
        <div class="step-content">
            <div class="status-message" data-installation-target="status"></div>
            
            <button class="btn" data-action="click->installation#finalizeInstallation">
                <span data-installation-target="buttonText">نهایی‌سازی نصب</span>
                <span class="loading" data-installation-target="loading" style="display: none;"></span>
            </button>
        </div>
    </div>
    
    <!-- مرحله 6: تکمیل -->
    <div class="step-card step-hidden" data-installation-target="step">
        <div class="step-header">
            <div>
                <h3>تکمیل نصب</h3>
                <p>حسابیکس با موفقیت نصب شد!</p>
            </div>
            <div class="step-number">✓</div>
        </div>
        <div class="step-content">
            <div class="status-message status-success" data-installation-target="status">
                نصب حسابیکس با موفقیت تکمیل شد!
            </div>
            
            <div class="text-center">
                <a href="#" data-installation-target="adminUrl" class="btn" target="_blank">
                    ورود به پنل مدیریت
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // تست ساده برای بررسی عملکرد
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM loaded');
            
            // تست دسترسی به المان‌ها
            const panelType = document.querySelector('[data-installation-target="panelType"]');
            const host = document.querySelector('[data-installation-target="host"]');
            const username = document.querySelector('[data-installation-target="username"]');
            const password = document.querySelector('[data-installation-target="password"]');
            
            console.log('Elements found:', {
                panelType: !!panelType,
                host: !!host,
                username: !!username,
                password: !!password
            });
        });
    </script>
{% endblock %}