فرم اطلاعات پیمان‌کار - دمو


<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-hard-hat"></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/contractor/dashboard/">
                    <input type="hidden" name="csrfmiddlewaretoken" value="oVak6a0e77n2gJSpzuo2zBBeYFCkmALjxR7GEBCrzEHI14ZJMFEewNn43G3nq8Oz">
                    
                    <!-- اطلاعات شرکت -->
                    <div class="form-section">
                        <h5 class="section-title"><i class="fas fa-building"></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="company_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="registration_number" placeholder="مثال: 1234567890" value="1234567890" 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="info@ariasazeh.ir" required>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">آدرس دفتر مرکزی *</label>
                            <textarea class="form-control" name="address" rows="3" placeholder="آدرس کامل دفتر مرکزی..." required>تهران، خیابان ولیعصر، نبش کوچه شهید رجایی، پلاک ۱۲۳، طبقه سوم</textarea>
                        </div>
                    </div>

                    <!-- اطلاعات پیمانکاری -->
                    <div class="form-section">
                        <h5 class="section-title"><i class="fas fa-certificate"></i> اطلاعات پیمانکاری</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">رتبه پیمانکاری *</label>
                                    <select class="form-select" name="rank" required>
                                        <option value="">انتخاب کنید...</option>
                                        <option value="1">پایه یک</option>
                                        <option value="2" selected>پایه دو</option>
                                        <option value="3">پایه سه</option>
                                        <option value="4">پایه چهار</option>
                                        <option value="5">پایه پنج</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="specialty" required>
                                        <option value="">انتخاب کنید...</option>
                                        <option value="building" selected>ساختمان</option>
                                        <option value="road">راه و ساختمان</option>
                                        <option value="infrastructure">زیرساخت</option>
                                        <option value="industrial">صنعتی</option>
                                        <option value="water">آب و فاضلاب</option>
                                        <option value="other">سایر</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="active_projects" required>
                                        <option value="">انتخاب کنید...</option>
                                        <option value="0-2">تا 2 پروژه</option>
                                        <option value="3-5" selected>3 تا 5 پروژه</option>
                                        <option value="6-10">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="number" class="form-control" name="capacity" placeholder="مثال: 500" value="250">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- تجهیزات و نیروی انسانی -->
                    <div class="form-section">
                        <h5 class="section-title"><i class="fas fa-tools"></i> تجهیزات و نیروی انسانی</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">تعداد کارکنان فنی</label>
                                    <input type="number" class="form-control" name="technical_staff" placeholder="مثال: 50" value="35">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">تعداد کارکنان اداری</label>
                                    <input type="number" class="form-control" name="admin_staff" placeholder="مثال: 10" value="8">
                                </div>
                            </div>
                        </div>
                        <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="equipment" value="crane" id="eq1" checked>
                                        <label class="form-check-label" for="eq1">
                                            جرثقیل و بالابر
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="equipment" value="excavator" id="eq2" checked>
                                        <label class="form-check-label" for="eq2">
                                            بیل مکانیکی
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="equipment" value="mixer" id="eq3">
                                        <label class="form-check-label" for="eq3">
                                            بچینگ پلانت
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- نمونه کارها -->
                    <div class="form-section">
                        <h5 class="section-title"><i class="fas fa-project-diagram"></i> نمونه کارها</h5>
                        <div class="mb-3">
                            <label class="form-label">پروژه‌های نمونه</label>
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="project1_name" placeholder="نام پروژه 1" value="برج تجاری آریا">
                                </div>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="project1_location" placeholder="مکان پروژه 1" value="تهران، سعادت‌آباد">
                                </div>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="project1_value" placeholder="ارزش پروژه 1" value="850 میلیارد تومان">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="project2_name" placeholder="نام پروژه 2" value="مجتمع مسکونی گلستان">
                                </div>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="project2_location" placeholder="مکان پروژه 2" value="تهران، پونک">
                                </div>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="project2_value" placeholder="ارزش پروژه 2" value="420 میلیارد تومان">
                                </div>
                            </div>
                        </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="licenses" 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/contractor/dashboard/";
        }, 1500);
    });
});
</script>