فرم اطلاعات مهندس - دمو


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/static/css/category-selector.87d813e03352.css">
<link rel="stylesheet" href="/static/css/persian-datepicker.3bc73ec34be0.css">
<link rel="stylesheet" href="/static/css/phone-input.7304741835be.css">
<link rel="stylesheet" href="/static/css/form-autosave.dcbf61cda2cf.css">
<style>
    :root {
        --bg-primary: #0f172a;
        --bg-card: #1e293b;
        --bg-secondary: #334155;
        --border-color: #475569;
        --text-primary: #f1f5f9;
        --text-secondary: #94a3b8;
        --accent-blue: #3b82f6;
        --accent-purple: #8b5cf6;
        --hover-bg: #475569;
    }
    
    body {
        background-color: var(--bg-primary);
    }
    .card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 2rem;
    }
    .card-header {
        background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
        color: var(--text-primary);
        border-radius: 16px 16px 0 0 !important;
        padding: 1.5rem;
        border: none;
    }
    .card-header h4 {
        margin: 0;
        color: white;
    }
    .card-body {
        padding: 2rem;
        background: var(--bg-card);
        border-radius: 0 0 16px 16px;
    }
    .form-section {
        background: var(--bg-secondary);
        padding: 1.5rem;
        border-radius: 12px;
        margin-bottom: 1.5rem;
        border: 1px solid var(--border-color);
    }
    .section-title {
        color: var(--text-primary);
        font-weight: 600;
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid var(--accent-blue);
    }
    .form-label {
        color: var(--text-primary);
        font-weight: 500;
        margin-bottom: 0.5rem;
    }
    .form-control, .form-select {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        border-radius: 8px;
        padding: 0.625rem 0.875rem;
        font-size: 0.95rem;
        transition: all 0.3s ease;
    }
    .form-control:focus, .form-select:focus {
        background: var(--bg-primary);
        border-color: var(--accent-blue);
        color: var(--text-primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }
    .form-control::placeholder {
        color: var(--text-secondary);
    }
    .form-select option {
        background: var(--bg-primary);
        color: var(--text-primary);
    }
    .btn {
        padding: 0.625rem 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
    }
    .btn-primary {
        background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
        color: white;
    }
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        opacity: 0.9;
    }
    .btn-secondary {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }
    .btn-secondary:hover {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
    .btn-lg {
        padding: 0.75rem 2rem;
        font-size: 1.05rem;
    }
    .alert-info {
        background: rgba(59, 130, 246, 0.2);
        border: 1px solid var(--accent-blue);
        color: var(--text-primary);
        border-radius: 12px;
    }
    .badge {
        padding: 0.5rem 1rem;
        font-weight: 500;
    }
    textarea.form-control {
        resize: vertical;
        min-height: 100px;
    }
    .selected-categories-preview {
        background: var(--bg-primary) !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-primary) !important;
    }
    #preview-placeholder {
        color: var(--text-secondary) !important;
    }
    small.text-muted {
        color: var(--text-secondary) !important;
    }
</style>



<div class="row">
    <div class="col-lg-10 mx-auto">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4><i class="fas fa-user-cog"></i> فرم اطلاعات مهندس</h4>
                <span class="badge bg-warning">در انتظار تکمیل</span>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i>
                    لطفاً تمام اطلاعات را با دقت وارد کنید. پس از ارسال، اطلاعات شما توسط مدیریت بررسی خواهد شد.
                </div>

                <form method="post" action="/demo/engineer/dashboard/">
                    <input type="hidden" name="csrfmiddlewaretoken" value="l6VKwQlUpxNmQAmkEgWEl8WUcEXsf5yi2a67R5XHjBg3Dgy4GAjtthzhsnvKDGS3">
                    
                    <!-- اطلاعات شخصی -->
                    <div class="form-section">
                        <h5 class="section-title"><i class="fas fa-user"></i> اطلاعات شخصی</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">نام و نام خانوادگی *</label>
                                    <input type="text" class="form-control" name="full_name" placeholder="مثال: علی رضایی" value="دکتر احمدی" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">کد ملی *</label>
                                    <input type="text" class="form-control" name="national_code" placeholder="مثال: 0012345678" maxlength="10" value="0123456789" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">شماره تماس *</label>
                                    <input type="tel" class="form-control" name="phone" placeholder="مثال: 09123456789" value="09123456789" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">ایمیل *</label>
                                    <input type="email" class="form-control" name="email" placeholder="example@email.com" value="ahmadi@engineer.ir" required>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- اطلاعات حرفه‌ای -->
                    <div class="form-section">
                        <h5 class="section-title"><i class="fas fa-briefcase"></i> اطلاعات حرفه‌ای</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">رشته تخصصی *</label>
                                    <select class="form-select" name="specialty" required>
                                        <option value="">انتخاب کنید...</option>
                                        <option value="civil" selected>مهندسی عمران</option>
                                        <option value="architecture">مهندسی معماری</option>
                                        <option value="mechanical">مهندسی مکانیک</option>
                                        <option value="electrical">مهندسی برق</option>
                                        <option value="urban">شهرسازی</option>
                                        <option value="surveying">نقشه‌برداری</option>
                                        <option value="other">سایر رشته‌ها</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">مدرک تحصیلی *</label>
                                    <select class="form-select" name="education" required>
                                        <option value="">انتخاب کنید...</option>
                                        <option value="diploma">دیپلم</option>
                                        <option value="associate">کاردانی</option>
                                        <option value="bachelor">کارشناسی</option>
                                        <option value="master" selected>کارشناسی ارشد</option>
                                        <option value="phd">دکتری</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">سابقه کاری (سال) *</label>
                                    <select class="form-select" name="experience" required>
                                        <option value="">انتخاب کنید...</option>
                                        <option value="0-2">تا 2 سال</option>
                                        <option value="3-5">3 تا 5 سال</option>
                                        <option value="6-10" selected>6 تا 10 سال</option>
                                        <option value="10+">بیش از 10 سال</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">شماره پروانه اشتغال به کار</label>
                                    <input type="text" class="form-control" name="license_number" placeholder="مثال: 12345-12345" value="12345-67890">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- خدمات و تخصص‌ها -->
                    <div class="form-section">
                        <h5 class="section-title"><i class="fas fa-cogs"></i> خدمات و تخصص‌ها</h5>
                        <div class="mb-3">
                            <label class="form-label">خدمات ارائه شده</label>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="services" value="supervision" id="service1" checked>
                                        <label class="form-check-label" for="service1">
                                            نظارت کامل بر پروژه
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="services" value="consultation" id="service2" checked>
                                        <label class="form-check-label" for="service2">
                                            مشاوره فنی
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="services" value="design" id="service3" checked>
                                        <label class="form-check-label" for="service3">
                                            طراحی و محاسبات
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">توضیحات تکمیلی</label>
                            <textarea class="form-control" name="description" rows="4" placeholder="توضیحات بیشتر درباره خدمات و تخصص‌های خود...">با بیش از 8 سال سابقه کار در زمینه طراحی و نظارت پروژه‌های عمرانی، تخصص در ساختمان‌های مسکونی و تجاری، دارای پروانه اشتغال به کار پایه 2 عمران</textarea>
                        </div>
                    </div>

                    <!-- آپلود مدارک -->
                    <div class="form-section">
                        <h5 class="section-title"><i class="fas fa-upload"></i> آپلود مدارک</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">رزومه کاری</label>
                                    <input type="file" class="form-control" name="resume" accept=".pdf,.doc,.docx">
                                    <small class="text-muted">فرمت‌های مجاز: PDF, DOC, DOCX (حداکثر 5MB)</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">مدارک تحصیلی</label>
                                    <input type="file" class="form-control" name="education_docs" accept=".pdf,.jpg,.jpeg,.png">
                                    <small class="text-muted">فرمت‌های مجاز: PDF, JPG, PNG (حداکثر 5MB)</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- دکمه‌ها -->
                    <div class="d-flex justify-content-between align-items-center">
                        <a href="/demo/" class="btn btn-secondary">
                            <i class="fas fa-arrow-right"></i> بازگشت
                        </a>
                        <div>
                            <button type="button" class="btn btn-outline-primary me-2" onclick="alert('این قابلیت در حالت دمو غیرفعال است')">
                                <i class="fas fa-save"></i> ذخیره پیش‌نویس
                            </button>
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-paper-plane"></i> ارسال اطلاعات
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add form validation and animations
    const form = document.querySelector('form');
    
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Show loading state
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> در حال ارسال...';
        submitBtn.disabled = true;
        
        // Simulate form submission
        setTimeout(() => {
            window.location.href = "/demo/engineer/dashboard/";
        }, 1500);
    });
});
</script>