{% extends "base.html" %}

{% block title %}Create Project - {{ app_name }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card mobile-card">
                <div class="card-body py-4">
                    <div class="d-flex align-items-center">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 48px; height: 48px;">
                            <i class="fas fa-project-diagram text-primary fa-lg"></i>
                        </div>
                        <div>
                            <h1 class="h2 mb-1">Create New Project</h1>
                            <p class="text-muted mb-0">Set up a new project to organize your work and track time effectively</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Project Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card mobile-card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-edit me-2 text-primary"></i>Project Information
                    </h6>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ url_for('projects.create_project') }}" novalidate id="createProjectForm">
                        <!-- Project Name and Client -->
                        <div class="row mb-4">
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label for="name" class="form-label fw-semibold">
                                        <i class="fas fa-tag me-2 text-primary"></i>Project Name <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" class="form-control form-control-lg" id="name" name="name" required 
                                           value="{{ request.form.get('name','') }}" placeholder="Enter a descriptive project name">
                                    <small class="form-text text-muted">Choose a clear, descriptive name that explains the project scope</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="client_id" class="form-label fw-semibold">
                                        <i class="fas fa-user me-2 text-info"></i>Client <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select form-select-lg" id="client_id" name="client_id" required>
                                        <option value="">Select a client...</option>
                                        {% for client in clients %}
                                        <option value="{{ client.id }}" 
                                                {% if request.form.get('client_id') == client.id|string %}selected{% endif %}
                                                data-default-rate="{{ client.default_hourly_rate or '' }}">
                                            {{ client.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                    <div class="form-text">
                                        <a href="{{ url_for('clients.create_client') }}" class="text-decoration-none">
                                            <i class="fas fa-plus"></i> Create new client
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="mb-4">
                            <label for="description" class="form-label fw-semibold">
                                <i class="fas fa-align-left me-2 text-primary"></i>Description
                            </label>
                            <textarea class="form-control" id="description" name="description" rows="4" 
                                      placeholder="Provide detailed information about the project, objectives, and deliverables...">{{ request.form.get('description','') }}</textarea>
                            <small class="form-text text-muted">Optional: Add context, objectives, or specific requirements for the project</small>
                        </div>

                        <!-- Billing Settings -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="billable" name="billable" {% if request.form.get('billable') %}checked{% endif %}>
                                        <label class="form-check-label fw-semibold" for="billable">
                                            <i class="fas fa-dollar-sign me-2 text-success"></i>Billable Project
                                        </label>
                                        <small class="form-text text-muted d-block">Enable billing for this project</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="hourly_rate" class="form-label fw-semibold">
                                        <i class="fas fa-clock me-2 text-warning"></i>Hourly Rate
                                    </label>
                                    <input type="number" step="0.01" min="0" class="form-control" id="hourly_rate" name="hourly_rate" 
                                           value="{{ request.form.get('hourly_rate','') }}" placeholder="e.g. 75.00">
                                    <small class="form-text text-muted">Leave empty for non-billable projects</small>
                                </div>
                            </div>
                        </div>

                        <!-- Billing Reference -->
                        <div class="mb-4">
                            <label for="billing_ref" class="form-label fw-semibold">
                                <i class="fas fa-receipt me-2 text-secondary"></i>Billing Reference
                            </label>
                            <input type="text" class="form-control" id="billing_ref" name="billing_ref" 
                                   value="{{ request.form.get('billing_ref','') }}" placeholder="PO number, contract reference, etc.">
                            <small class="form-text text-muted">Optional: Add a reference number or identifier for billing purposes</small>
                        </div>

                        <!-- Form Actions -->
                        <div class="d-flex gap-3 pt-3 border-top">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-save me-2"></i>Create Project
                            </button>
                            <a href="{{ url_for('projects.list_projects') }}" class="btn btn-outline-secondary btn-lg">
                                <i class="fas fa-times me-2"></i>Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar Help -->
        <div class="col-lg-4">
            <!-- Project Creation Tips -->
            <div class="card mobile-card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-lightbulb me-2 text-warning"></i>Project Creation Tips
                    </h6>
                </div>
                <div class="card-body">
                    <div class="tip-item mb-3">
                        <div class="d-flex align-items-start">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-check text-primary fa-xs"></i>
                            </div>
                            <div>
                                <small class="fw-semibold d-block">Clear Naming</small>
                                <small class="text-muted">Use descriptive names that clearly indicate the project's purpose</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tip-item mb-3">
                        <div class="d-flex align-items-start">
                            <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-dollar-sign text-success fa-xs"></i>
                            </div>
                            <div>
                                <small class="fw-semibold d-block">Billing Setup</small>
                                <small class="text-muted">Set appropriate hourly rates based on project complexity and client budget</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tip-item mb-3">
                        <div class="d-flex align-items-start">
                            <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-info-circle text-info fa-xs"></i>
                            </div>
                            <div>
                                <small class="fw-semibold d-block">Detailed Description</small>
                                <small class="text-muted">Include project objectives, deliverables, and key requirements</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tip-item">
                        <div class="d-flex align-items-start">
                            <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-user text-warning fa-xs"></i>
                            </div>
                            <div>
                                <small class="fw-semibold d-block">Client Selection</small>
                                <small class="text-muted">Choose the right client to ensure proper project organization</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Billing Guide -->
            <div class="card mobile-card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle me-2 text-info"></i>Billing Guide
                    </h6>
                </div>
                <div class="card-body">
                    <div class="billing-guide-item mb-3">
                        <div class="d-flex align-items-center mb-2">
                            <span class="billing-badge billing-billable me-2">Billable</span>
                            <small class="text-muted">Track time and bill client</small>
                        </div>
                    </div>
                    
                    <div class="billing-guide-item mb-3">
                        <div class="d-flex align-items-center mb-2">
                            <span class="billing-badge billing-non-billable me-2">Non-Billable</span>
                            <small class="text-muted">Track time without billing</small>
                        </div>
                    </div>
                    
                    <div class="billing-guide-item">
                        <div class="d-flex align-items-center mb-2">
                            <span class="billing-badge billing-rate me-2">Rate Setting</span>
                            <small class="text-muted">Set appropriate hourly rates</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Project Management -->
            <div class="card mobile-card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-tasks me-2 text-secondary"></i>Project Management
                    </h6>
                </div>
                <div class="card-body">
                    <div class="management-item mb-3">
                        <div class="d-flex align-items-start">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-clock text-primary fa-xs"></i>
                            </div>
                            <div>
                                <small class="fw-semibold d-block">Time Tracking</small>
                                <small class="text-muted">Log time entries for accurate project tracking</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="management-item mb-3">
                        <div class="d-flex align-items-start">
                            <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-list text-success fa-xs"></i>
                            </div>
                            <div>
                                <small class="fw-semibold d-block">Task Creation</small>
                                <small class="text-muted">Break down projects into manageable tasks</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="management-item">
                        <div class="d-flex align-items-start">
                            <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-chart-bar text-info fa-xs"></i>
                            </div>
                            <div>
                                <small class="fw-semibold d-block">Progress Monitoring</small>
                                <small class="text-muted">Track project progress and time allocation</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Billing Badges */
.billing-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.billing-billable {
    background-color: #dcfce7;
    color: #166534;
}

.billing-non-billable {
    background-color: #e2e8f0;
    color: #475569;
}

.billing-rate {
    background-color: #fef3c7;
    color: #92400e;
}

/* Tip Items */
.tip-item {
    padding: 0.75rem;
    border-radius: 8px;
    background-color: #f8fafc;
    transition: all 0.2s ease;
}

.tip-item:hover {
    background-color: #f1f5f9;
    transform: translateX(4px);
}

/* Billing and Management Guide Items */
.billing-guide-item,
.management-item {
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.billing-guide-item:hover,
.management-item:hover {
    background-color: #f8fafc;
}

/* Form Styling */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.form-control-lg {
    min-height: 56px;
}

.form-select-lg {
    min-height: 56px;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .card-header {
        padding: 1rem 1rem 0.75rem 1rem;
    }
    
    .card-body {
        padding: 0.75rem 1rem;
    }
    
    .tip-item:hover {
        transform: none;
    }
    
    .billing-guide-item:hover,
    .management-item:hover {
        background-color: transparent;
    }
}

/* Hover Effects */
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tip-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const clientSelect = document.getElementById('client_id');
    const hourlyRateInput = document.getElementById('hourly_rate');
    const billableCheckbox = document.getElementById('billable');
    const form = document.getElementById('createProjectForm');
    const nameInput = document.getElementById('name');
    
    // Auto-fill hourly rate from client default
    clientSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const defaultRate = selectedOption.getAttribute('data-default-rate');
        
        if (defaultRate && !hourlyRateInput.value) {
            hourlyRateInput.value = defaultRate;
        }
    });
    
    // Toggle hourly rate field based on billable checkbox
    billableCheckbox.addEventListener('change', function() {
        if (this.checked) {
            hourlyRateInput.removeAttribute('disabled');
            hourlyRateInput.classList.remove('text-muted');
        } else {
            hourlyRateInput.setAttribute('disabled', 'disabled');
            hourlyRateInput.classList.add('text-muted');
            hourlyRateInput.value = '';
        }
    });
    
    // Form validation and enhancement
    form.addEventListener('submit', function(e) {
        const name = nameInput.value.trim();
        const clientId = clientSelect.value;
        
        if (!name || !clientId) {
            e.preventDefault();
            if (!name) {
                nameInput.focus();
                nameInput.classList.add('is-invalid');
            }
            if (!clientId) {
                clientSelect.focus();
                clientSelect.classList.add('is-invalid');
            }
            return false;
        }
        
        // Show loading state
        const submitBtn = form.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Creating...';
        submitBtn.disabled = true;
        
        // Re-enable after a delay (in case of validation errors)
        setTimeout(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }, 5000);
    });
    
    // Real-time validation feedback
    nameInput.addEventListener('input', function() {
        if (this.value.trim()) {
            this.classList.remove('is-invalid');
            this.classList.add('is-valid');
        } else {
            this.classList.remove('is-valid');
        }
    });
    
    clientSelect.addEventListener('change', function() {
        if (this.value) {
            this.classList.remove('is-invalid');
            this.classList.add('is-valid');
        } else {
            this.classList.remove('is-valid');
        }
    });
    
    // Initialize form state
    if (billableCheckbox.checked) {
        hourlyRateInput.removeAttribute('disabled');
    } else {
        hourlyRateInput.setAttribute('disabled', 'disabled');
        hourlyRateInput.classList.add('text-muted');
    }
});
</script>
{% endblock %}


