﻿<?= $this->extend('layouts/universal_layout') ?>

<?= $this->section('content') ?>

<div class="container-fluid py-4">
    <!-- Header Section -->
        <div class="content-card mb-4">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="text-gradient mb-2">
                        <i class="bi bi-plus-circle"></i> Create New Project
                    </h1>
                    <p class="text-muted mb-0">Fill in all the details to create a comprehensive project profile</p>
                </div>
                <div class="col-md-4 text-end">
                    <a href="<?= base_url('projects') ?>" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Projects
                    </a>
                </div>
            </div>
        </div>

        <form id="createProjectForm" action="<?= base_url('projects/store') ?>" method="POST" enctype="multipart/form-data">
            <?= csrf_field() ?>

            <!-- Project Basic Information Section -->
            <div class="content-card">
                <div class="form-section">
                    <div class="form-section-title">
                        <i class="bi bi-info-circle"></i> Project Basic Information
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control <?= isset($validation) && $validation->hasError('project_name') ? 'is-invalid' : '' ?>" 
                                       id="project_name" name="project_name" placeholder="Project Name" 
                                       value="<?= old('project_name') ?>" required>
                                <label for="project_name">Project Name *</label>
                                <?php if(isset($validation) && $validation->hasError('project_name')): ?>
                                    <div class="invalid-feedback"><?= $validation->getError('project_name') ?></div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="project_code" name="project_code" 
                                       placeholder="Project Code" value="<?= old('project_code') ?>">
                                <label for="project_code">Project Code</label>
                                <small class="text-muted">Auto-generated if left empty</small>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <textarea class="form-control" id="description" name="description" 
                                          placeholder="Project Description" style="height: 100px"><?= old('description') ?></textarea>
                                <label for="description">Project Description</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="location" name="location" 
                                       placeholder="Project Location" value="<?= old('location') ?>">
                                <label for="location">Project Location</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="site_area" name="site_area" 
                                       placeholder="Site Area (e.g., 5000 sq ft)" value="<?= old('site_area') ?>">
                                <label for="site_area">Site Area</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-floating">
                                <select class="form-select <?= isset($validation) && $validation->hasError('project_type') ? 'is-invalid' : '' ?>" 
                                        id="project_type" name="project_type" required>
                                    <option value="">Select Project Type</option>
                                    <option value="residential" <?= old('project_type') === 'residential' ? 'selected' : '' ?>>Residential</option>
                                    <option value="commercial" <?= old('project_type') === 'commercial' ? 'selected' : '' ?>>Commercial</option>
                                    <option value="infrastructure" <?= old('project_type') === 'infrastructure' ? 'selected' : '' ?>>Infrastructure</option>
                                    <option value="industrial" <?= old('project_type') === 'industrial' ? 'selected' : '' ?>>Industrial</option>
                                    <option value="government" <?= old('project_type') === 'government' ? 'selected' : '' ?>>Government</option>
                                </select>
                                <label for="project_type">Project Type *</label>
                                <?php if(isset($validation) && $validation->hasError('project_type')): ?>
                                    <div class="invalid-feedback"><?= $validation->getError('project_type') ?></div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-floating">
                                <select class="form-select" id="priority" name="priority">
                                    <option value="low" <?= old('priority') === 'low' ? 'selected' : '' ?>>Low Priority</option>
                                    <option value="medium" <?= old('priority') === 'medium' ? 'selected' : '' ?>>Medium Priority</option>
                                    <option value="high" <?= old('priority') === 'high' ? 'selected' : '' ?>>High Priority</option>
                                    <option value="critical" <?= old('priority') === 'critical' ? 'selected' : '' ?>>Critical Priority</option>
                                </select>
                                <label for="priority">Priority Level</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-floating">
                                <select class="form-select" id="risk_level" name="risk_level">
                                    <option value="low" <?= old('risk_level') === 'low' ? 'selected' : '' ?>>Low Risk</option>
                                    <option value="medium" <?= old('risk_level') === 'medium' ? 'selected' : '' ?>>Medium Risk</option>
                                    <option value="high" <?= old('risk_level') === 'high' ? 'selected' : '' ?>>High Risk</option>
                                </select>
                                <label for="risk_level">Risk Level</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Client & Team Information Section -->
            <div class="content-card">
                <div class="form-section">
                    <div class="form-section-title">
                        <i class="bi bi-people"></i> Client & Team Information
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                <select class="form-select <?= isset($validation) && $validation->hasError('client_id') ? 'is-invalid' : '' ?>" 
                                        id="client_id" name="client_id" required>
                                    <option value="">Select Client</option>
                                    <option value="1">ABC Construction Ltd.</option>
                                    <option value="2">Metropolitan Transport Authority</option>
                                    <option value="3">State Infrastructure Corp.</option>
                                    <option value="4">Private Developer Group</option>
                                </select>
                                <label for="client_id">Client *</label>
                                <?php if(isset($validation) && $validation->hasError('client_id')): ?>
                                    <div class="invalid-feedback"><?= $validation->getError('client_id') ?></div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="client_contact" name="client_contact" 
                                       placeholder="Client Contact Person" value="<?= old('client_contact') ?>">
                                <label for="client_contact">Client Contact Person</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <select class="form-select" id="project_manager_id" name="project_manager_id">
                                    <option value="">Select Project Manager</option>
                                    <option value="1">John Smith</option>
                                    <option value="2">Sarah Johnson</option>
                                    <option value="3">Mike Wilson</option>
                                    <option value="4">Emily Davis</option>
                                </select>
                                <label for="project_manager_id">Project Manager</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <select class="form-select" id="site_engineer_id" name="site_engineer_id">
                                    <option value="">Select Site Engineer</option>
                                    <option value="1">Mike Johnson</option>
                                    <option value="2">David Brown</option>
                                    <option value="3">Lisa Anderson</option>
                                    <option value="4">Robert Taylor</option>
                                </select>
                                <label for="site_engineer_id">Site Engineer</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="number" min="1" max="1000" class="form-control" id="estimated_team_size" 
                                       name="estimated_team_size" placeholder="Team Size" value="<?= old('estimated_team_size', '25') ?>">
                                <label for="estimated_team_size">Estimated Team Size</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="contractor_name" name="contractor_name" 
                                       placeholder="Main Contractor" value="<?= old('contractor_name') ?>">
                                <label for="contractor_name">Main Contractor</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Timeline & Budget Section -->
            <div class="content-card">
                <div class="form-section">
                    <div class="form-section-title">
                        <i class="bi bi-calendar-range"></i> Timeline & Budget
                    </div>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="form-floating">
                                <input type="date" class="form-control <?= isset($validation) && $validation->hasError('start_date') ? 'is-invalid' : '' ?>" 
                                       id="start_date" name="start_date" value="<?= old('start_date') ?>" required>
                                <label for="start_date">Start Date *</label>
                                <?php if(isset($validation) && $validation->hasError('start_date')): ?>
                                    <div class="invalid-feedback"><?= $validation->getError('start_date') ?></div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-floating">
                                <input type="date" class="form-control <?= isset($validation) && $validation->hasError('end_date') ? 'is-invalid' : '' ?>" 
                                       id="end_date" name="end_date" value="<?= old('end_date') ?>" required>
                                <label for="end_date">End Date *</label>
                                <?php if(isset($validation) && $validation->hasError('end_date')): ?>
                                    <div class="invalid-feedback"><?= $validation->getError('end_date') ?></div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-floating">
                                <input type="number" min="1" max="120" class="form-control" id="duration_months" 
                                       name="duration_months" placeholder="Duration" value="<?= old('duration_months') ?>" readonly>
                                <label for="duration_months">Duration (Months)</label>
                                <small class="text-muted">Auto-calculated from dates</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="number" min="0" step="0.01" class="form-control <?= isset($validation) && $validation->hasError('budget') ? 'is-invalid' : '' ?>" 
                                       id="budget" name="budget" placeholder="Budget Amount" value="<?= old('budget') ?>" required>
                                <label for="budget">Total Budget (â‚¹) *</label>
                                <?php if(isset($validation) && $validation->hasError('budget')): ?>
                                    <div class="invalid-feedback"><?= $validation->getError('budget') ?></div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <select class="form-select" id="currency" name="currency">
                                    <option value="INR" <?= old('currency') === 'INR' ? 'selected' : '' ?>>Indian Rupee (â‚¹)</option>
                                    <option value="USD" <?= old('currency') === 'USD' ? 'selected' : '' ?>>US Dollar ($)</option>
                                    <option value="EUR" <?= old('currency') === 'EUR' ? 'selected' : '' ?>>Euro (â‚¬)</option>
                                </select>
                                <label for="currency">Currency</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="number" min="0" step="0.01" class="form-control" id="advance_payment" 
                                       name="advance_payment" placeholder="Advance Payment" value="<?= old('advance_payment') ?>">
                                <label for="advance_payment">Advance Payment (â‚¹)</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="number" min="0" max="100" step="0.1" class="form-control" id="retention_percentage" 
                                       name="retention_percentage" placeholder="Retention %" value="<?= old('retention_percentage', '5') ?>">
                                <label for="retention_percentage">Retention Percentage (%)</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contract & Legal Details Section -->
            <div class="content-card">
                <div class="form-section">
                    <div class="form-section-title">
                        <i class="bi bi-file-earmark-text"></i> Contract & Legal Details
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="contract_number" name="contract_number" 
                                       placeholder="Contract Number" value="<?= old('contract_number') ?>">
                                <label for="contract_number">Contract Number</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <select class="form-select" id="contract_type" name="contract_type">
                                    <option value="fixed_price" <?= old('contract_type') === 'fixed_price' ? 'selected' : '' ?>>Fixed Price</option>
                                    <option value="cost_plus" <?= old('contract_type') === 'cost_plus' ? 'selected' : '' ?>>Cost Plus</option>
                                    <option value="time_material" <?= old('contract_type') === 'time_material' ? 'selected' : '' ?>>Time & Material</option>
                                    <option value="design_build" <?= old('contract_type') === 'design_build' ? 'selected' : '' ?>>Design Build</option>
                                </select>
                                <label for="contract_type">Contract Type</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="date" class="form-control" id="contract_signed_date" name="contract_signed_date" 
                                       value="<?= old('contract_signed_date') ?>">
                                <label for="contract_signed_date">Contract Signed Date</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="warranty_period" name="warranty_period" 
                                       placeholder="Warranty Period" value="<?= old('warranty_period', '2 years') ?>">
                                <label for="warranty_period">Warranty Period</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <textarea class="form-control" id="contract_terms" name="contract_terms" 
                                          placeholder="Contract Terms & Conditions" style="height: 80px"><?= old('contract_terms') ?></textarea>
                                <label for="contract_terms">Contract Terms & Conditions</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Details Section -->
            <div class="content-card">
                <div class="form-section">
                    <div class="form-section-title">
                        <i class="bi bi-gear"></i> Additional Details
                    </div>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="form-floating">
                                <select class="form-select" id="status" name="status">
                                    <option value="planning" <?= old('status') === 'planning' ? 'selected' : '' ?>>Planning</option>
                                    <option value="approved" <?= old('status') === 'approved' ? 'selected' : '' ?>>Approved</option>
                                    <option value="ready_to_start" <?= old('status') === 'ready_to_start' ? 'selected' : '' ?>>Ready to Start</option>
                                </select>
                                <label for="status">Initial Status</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-floating">
                                <select class="form-select" id="project_category" name="project_category">
                                    <option value="new_construction" <?= old('project_category') === 'new_construction' ? 'selected' : '' ?>>New Construction</option>
                                    <option value="renovation" <?= old('project_category') === 'renovation' ? 'selected' : '' ?>>Renovation</option>
                                    <option value="maintenance" <?= old('project_category') === 'maintenance' ? 'selected' : '' ?>>Maintenance</option>
                                    <option value="demolition" <?= old('project_category') === 'demolition' ? 'selected' : '' ?>>Demolition</option>
                                </select>
                                <label for="project_category">Project Category</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-floating">
                                <select class="form-select" id="safety_requirements" name="safety_requirements">
                                    <option value="standard" <?= old('safety_requirements') === 'standard' ? 'selected' : '' ?>>Standard Safety</option>
                                    <option value="enhanced" <?= old('safety_requirements') === 'enhanced' ? 'selected' : '' ?>>Enhanced Safety</option>
                                    <option value="high_risk" <?= old('safety_requirements') === 'high_risk' ? 'selected' : '' ?>>High Risk Safety</option>
                                </select>
                                <label for="safety_requirements">Safety Requirements</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="environmental_clearance" name="environmental_clearance" 
                                       placeholder="Environmental Clearance" value="<?= old('environmental_clearance') ?>">
                                <label for="environmental_clearance">Environmental Clearance</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="building_permits" name="building_permits" 
                                       placeholder="Building Permits" value="<?= old('building_permits') ?>">
                                <label for="building_permits">Building Permits</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <textarea class="form-control" id="special_requirements" name="special_requirements" 
                                          placeholder="Special Requirements" style="height: 80px"><?= old('special_requirements') ?></textarea>
                                <label for="special_requirements">Special Requirements & Notes</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Document Upload Section -->
            <div class="content-card">
                <div class="form-section">
                    <div class="form-section-title">
                        <i class="bi bi-cloud-upload"></i> Document Uploads
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="project_documents" class="form-label">Project Documents</label>
                            <input type="file" class="form-control" id="project_documents" name="project_documents[]" multiple accept=".pdf,.doc,.docx,.xlsx,.jpg,.png">
                            <small class="text-muted">Upload contracts, plans, permits, etc. (Max 10MB each)</small>
                        </div>
                        <div class="col-md-6">
                            <label for="project_images" class="form-label">Site Images</label>
                            <input type="file" class="form-control" id="project_images" name="project_images[]" multiple accept=".jpg,.jpeg,.png,.gif">
                            <small class="text-muted">Upload site photos, renders, etc. (Max 5MB each)</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="content-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <button type="button" id="saveDraftBtn" class="btn btn-outline-secondary">
                            <i class="bi bi-save"></i> Save as Draft
                        </button>
                    </div>
                    <div>
                        <button type="reset" class="btn btn-outline-danger me-2">
                            <i class="bi bi-x-circle"></i> Reset Form
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> Create Project
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </main>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Date Pickers
            flatpickr("#start_date", {
                dateFormat: "Y-m-d",
                minDate: "today",
                onChange: function(selectedDates, dateStr, instance) {
                    const endDatePicker = document.querySelector("#end_date")._flatpickr;
                    if (endDatePicker) {
                        endDatePicker.set('minDate', dateStr);
                        calculateDuration();
                    }
                }
            });

            flatpickr("#end_date", {
                dateFormat: "Y-m-d",
                minDate: "today",
                onChange: function(selectedDates, dateStr, instance) {
                    calculateDuration();
                }
            });

            flatpickr("#contract_signed_date", {
                dateFormat: "Y-m-d",
                maxDate: "today"
            });

            // Calculate duration between dates
            function calculateDuration() {
                const startDate = document.getElementById('start_date').value;
                const endDate = document.getElementById('end_date').value;
                
                if (startDate && endDate) {
                    const start = new Date(startDate);
                    const end = new Date(endDate);
                    const diffTime = Math.abs(end - start);
                    const diffMonths = Math.ceil(diffTime / (1000 * 60 * 60 * 24 * 30));
                    document.getElementById('duration_months').value = diffMonths;
                }
            }

            // Auto-generate project code
            const projectNameInput = document.getElementById('project_name');
            const projectCodeInput = document.getElementById('project_code');
            const projectTypeSelect = document.getElementById('project_type');

            function generateProjectCode() {
                if (!projectCodeInput.value && projectNameInput.value && projectTypeSelect.value) {
                    const name = projectNameInput.value.substring(0, 3).toUpperCase();
                    const type = projectTypeSelect.value.substring(0, 3).toUpperCase();
                    const year = new Date().getFullYear();
                    const random = Math.floor(Math.random() * 100).toString().padStart(2, '0');
                    projectCodeInput.value = `${type}-${name}-${year}-${random}`;
                }
            }

            projectNameInput.addEventListener('blur', generateProjectCode);
            projectTypeSelect.addEventListener('change', generateProjectCode);

            // Form validation
            const form = document.getElementById('createProjectForm');
            form.addEventListener('submit', function(e) {
                const startDate = new Date(document.getElementById('start_date').value);
                const endDate = new Date(document.getElementById('end_date').value);
                
                if (endDate <= startDate) {
                    e.preventDefault();
                    alert('End date must be after start date');
                    return false;
                }
                
                const budget = parseFloat(document.getElementById('budget').value);
                if (budget <= 0) {
                    e.preventDefault();
                    alert('Budget must be greater than 0');
                    return false;
                }
            });

            // Save as draft functionality
            document.getElementById('saveDraftBtn').addEventListener('click', function() {
                const form = document.getElementById('createProjectForm');
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'save_as_draft';
                hiddenInput.value = '1';
                form.appendChild(hiddenInput);
                form.submit();
            });

            // Budget formatting
            const budgetInput = document.getElementById('budget');
            budgetInput.addEventListener('input', function() {
                const value = this.value.replace(/\D/g, '');
                this.value = value;
            });

            // Initialize tooltips
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    

<?= $this->endSection() ?>

