37680-vm/core/templates/core/company_setup.html

{% extends 'base.html' %}

{% block title %}Setup Your Company - RepairsHub{% endblock %}

{% block head %}
<style>
    .setup-card {
        max-width: 800px;
        margin: 0 auto;
    }
    .step-indicator {
        display: flex;
        justify-content: space-between;
        margin-bottom: 3rem;
        position: relative;
    }
    .step-indicator::before {
        content: '';
        position: absolute;
        top: 15px;
        left: 0;
        right: 0;
        height: 2px;
        background: #E2E8F0;
        z-index: 1;
    }
    .step-item {
        position: relative;
        z-index: 2;
        background: var(--bg-slate);
        padding: 0 10px;
        text-align: center;
    }
    .step-number {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #E2E8F0;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 8px;
        font-weight: 600;
        border: 2px solid #E2E8F0;
    }
    .step-item.active .step-number {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }
    .dynamic-list-item {
        background: white;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        padding: 10px 15px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="setup-card">
        <div class="text-center mb-5">
            <h1 class="display-6">Configure Your <span>RepairsHub</span></h1>
            <p class="text-muted">Finalize your company profile to start managing jobs.</p>
        </div>

        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }}">{{ message }}</div>
            {% endfor %}
        {% endif %}

        <form method="post" id="onboardingForm">
            {% csrf_token %}
            
            <!-- Step 1: Basic Info -->
            <div class="card p-4 mb-4">
                <h5 class="mb-4"><i class="bi bi-building me-2 text-primary"></i> 1. Company Information</h5>
                <div class="mb-3">
                    <label class="form-label fw-bold">Company Name</label>
                    {{ company_form.name }}
                </div>
                <div class="form-check form-switch mb-3">
                    {{ company_form.is_uprn_required }}
                    <label class="form-check-label fw-bold">Require Unique UPRN for all jobs?</label>
                </div>
            </div>

            <!-- Step 2: Job Statuses -->
            <div class="card p-4 mb-4">
                <h5 class="mb-4"><i class="bi bi-activity me-2 text-primary"></i> 2. Job Statuses</h5>
                <p class="small text-muted mb-3">Define the lifecycle of a repair job. One status must be the "Starting Status".</p>
                
                <div id="statusList">
                    <div class="dynamic-list-item">
                        <input type="text" name="statuses" class="form-control" placeholder="e.g. To Be Surveyed" value="To Be Surveyed" required>
                        <div class="form-check ms-3">
                            <input class="form-check-input" type="radio" name="default_status" value="0" checked id="default0">
                            <label class="form-check-label small" for="default0">Start</label>
                        </div>
                    </div>
                    <div class="dynamic-list-item">
                        <input type="text" name="statuses" class="form-control" placeholder="e.g. Booking Required" value="Booking Required">
                        <div class="form-check ms-3">
                            <input class="form-check-input" type="radio" name="default_status" value="1" id="default1">
                        </div>
                    </div>
                    <div class="dynamic-list-item">
                        <input type="text" name="statuses" class="form-control" placeholder="e.g. Completed" value="Completed">
                        <div class="form-check ms-3">
                            <input class="form-check-input" type="radio" name="default_status" value="2" id="default2">
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" onclick="addStatus()"><i class="bi bi-plus-circle"></i> Add Status</button>
            </div>

            <!-- Step 3: Required Folders -->
            <div class="card p-4 mb-4">
                <h5 class="mb-4"><i class="bi bi-folder-plus me-2 text-primary"></i> 3. Required Job Folders</h5>
                <p class="small text-muted mb-3">These folders will appear on every job for document management.</p>
                
                <div id="folderList">
                    <div class="dynamic-list-item">
                        <input type="text" name="folders" class="form-control" placeholder="e.g. Photos" value="Photos" required>
                    </div>
                    <div class="dynamic-list-item">
                        <input type="text" name="folders" class="form-control" placeholder="e.g. Quote" value="Quote" required>
                    </div>
                    <div class="dynamic-list-item">
                        <input type="text" name="folders" class="form-control" placeholder="e.g. Invoices" value="Invoices">
                    </div>
                </div>
                <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" onclick="addFolder()"><i class="bi bi-plus-circle"></i> Add Folder</button>
            </div>

            <div class="text-end">
                <button type="submit" class="btn btn-primary btn-lg px-5">Complete Setup</button>
            </div>
        </form>
    </div>
</div>

<script>
    function addStatus() {
        const list = document.getElementById('statusList');
        const count = list.children.length;
        const div = document.createElement('div');
        div.className = 'dynamic-list-item';
        div.innerHTML = `
            <input type="text" name="statuses" class="form-control" placeholder="New Status">
            <div class="form-check ms-3">
                <input class="form-check-input" type="radio" name="default_status" value="${count}" id="default${count}">
            </div>
            <button type="button" class="btn btn-sm text-danger" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>
        `;
        list.appendChild(div);
    }

    function addFolder() {
        const list = document.getElementById('folderList');
        const div = document.createElement('div');
        div.className = 'dynamic-list-item';
        div.innerHTML = `
            <input type="text" name="folders" class="form-control" placeholder="New Folder">
            <button type="button" class="btn btn-sm text-danger" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>
        `;
        list.appendChild(div);
    }
</script>
{% endblock %}