{% extends "base.html" %}

{% block title %}{{ 'Edit' if job else 'New' }} Job - Fire Alarm Management{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h1>
            <i class="bi bi-{{ 'pencil' if job else 'plus-lg' }}"></i>
            {{ 'Edit Job: ' + job.job_name if job else 'New Job' }}
        </h1>
    </div>
</div>

<form id="jobForm">
    <div class="row">
        <!-- Basic Info -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">Basic Information</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Job Number *</label>
                            <input type="text" class="form-control" name="job_number" required
                                   value="{{ job.job_number if job else '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Job Name *</label>
                            <input type="text" class="form-control" name="job_name" required
                                   value="{{ job.job_name if job else '' }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Location</label>
                            <input type="text" class="form-control" name="location"
                                   value="{{ job.location if job else '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Est. Starting Qtr</label>
                            <input type="text" class="form-control" name="est_starting_qtr"
                                   value="{{ job.est_starting_qtr if job else '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Number of Units</label>
                            <input type="number" class="form-control" name="number_of_units"
                                   value="{{ job.number_of_units if job else '' }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Budget -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">Budget & Estimates</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Fire Alarm Budget</label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="number" step="0.01" class="form-control" name="fire_alarm_budget"
                                       value="{{ job.fire_alarm_budget if job else '' }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Labor Estimate</label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="number" step="0.01" class="form-control" name="labor_estimate"
                                       value="{{ job.labor_estimate if job else '' }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Material Estimate</label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="number" step="0.01" class="form-control" name="material_estimate"
                                       value="{{ job.material_estimate if job else '' }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Amount Left on Contract</label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="number" step="0.01" class="form-control" name="amount_left_on_contract"
                                       value="{{ job.amount_left_on_contract if job else '' }}">
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Completion %</label>
                            <div class="input-group">
                                <input type="number" step="0.01" min="0" max="1" class="form-control" name="percent_complete"
                                       value="{{ job.percent_complete if job else '0' }}">
                                <span class="input-group-text">0-1 (e.g., 0.5 = 50%)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Assignments -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">Assignments</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">PM Assigned</label>
                            <input type="text" class="form-control" name="pm_assigned"
                                   value="{{ job.pm_assigned if job else '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">AOR</label>
                            <input type="text" class="form-control" name="aor"
                                   value="{{ job.aor if job else '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Fire Vendor</label>
                            <input type="text" class="form-control" name="fire_vendor"
                                   value="{{ job.fire_vendor if job else '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Install Partner</label>
                            <input type="text" class="form-control" name="install_partner"
                                   value="{{ job.install_partner if job else '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">P/S or Install</label>
                            <select class="form-select" name="ps_or_install">
                                <option value="">Select...</option>
                                <option value="P/S" {{ 'selected' if job and job.ps_or_install == 'P/S' else '' }}>P/S</option>
                                <option value="INSTALL" {{ 'selected' if job and job.ps_or_install == 'INSTALL' else '' }}>Install</option>
                                <option value="P/S WITH VENDOR - RER INSTALL" {{ 'selected' if job and job.ps_or_install == 'P/S WITH VENDOR - RER INSTALL' else '' }}>P/S with Vendor - RER Install</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Subcontractor</label>
                            <input type="text" class="form-control" name="subcontractor"
                                   value="{{ job.subcontractor if job else '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">PCI</label>
                            <input type="text" class="form-control" name="pci"
                                   value="{{ job.pci if job else '' }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Communication & Plans -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">Communication & Plans</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">VOIP or Phone</label>
                            <select class="form-select" name="voip_or_phone">
                                <option value="">Select...</option>
                                <option value="VOIP" {{ 'selected' if job and job.voip_or_phone == 'VOIP' else '' }}>VOIP</option>
                                <option value="PHONE" {{ 'selected' if job and job.voip_or_phone == 'PHONE' else '' }}>Phone</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Plans</label>
                            <select class="form-select" name="plans">
                                <option value="">Select...</option>
                                <option value="Yes" {{ 'selected' if job and job.plans == 'Yes' else '' }}>Yes</option>
                                <option value="No" {{ 'selected' if job and job.plans == 'No' else '' }}>No</option>
                                <option value="Done" {{ 'selected' if job and job.plans == 'Done' else '' }}>Done</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Sep Club House</label>
                            <select class="form-select" name="sep_club_house">
                                <option value="">Select...</option>
                                <option value="YES" {{ 'selected' if job and job.sep_club_house == 'YES' else '' }}>Yes</option>
                                <option value="NO" {{ 'selected' if job and job.sep_club_house == 'NO' else '' }}>No</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Key Dates -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">Key Dates</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Elevator Final</label>
                            <input type="date" class="form-control" name="elevator_final"
                                   value="{{ job.elevator_final if job else '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Pretest</label>
                            <input type="date" class="form-control" name="pretest"
                                   value="{{ job.pretest if job else '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Final Date</label>
                            <input type="date" class="form-control" name="final_date"
                                   value="{{ job.final_date if job else '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">C/O Drop Dead Date</label>
                            <input type="date" class="form-control" name="co_drop_dead_date"
                                   value="{{ job.co_drop_dead_date if job else '' }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Milestones -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">Milestones</div>
                <div class="card-body">
                    <div class="row g-3">
                        {% for i in range(1, 8) %}
                        <div class="col-12">
                            <label class="form-label">{{ i }}{{ 'st' if i == 1 else ('nd' if i == 2 else ('rd' if i == 3 else 'th')) }} Milestone</label>
                            <input type="text" class="form-control" name="milestone_{{ i }}"
                                   value="{{ job['milestone_' ~ i] if job else '' }}">
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Notes & Issues -->
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-header">Notes & Issues</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Notes</label>
                            <textarea class="form-control" name="notes" rows="4">{{ job.notes if job else '' }}</textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Issues</label>
                            <textarea class="form-control" name="issues" rows="4">{{ job.issues if job else '' }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-lg"></i> {{ 'Update' if job else 'Create' }} Job
            </button>
            <a href="{{ url_for('main.jobs_list') }}" class="btn btn-secondary">
                <i class="bi bi-x-lg"></i> Cancel
            </a>
        </div>
    </div>
</form>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('jobForm').addEventListener('submit', async (e) => {
    e.preventDefault();

    const formData = new FormData(e.target);
    const data = {};

    formData.forEach((value, key) => {
        if (value !== '') {
            if (['fire_alarm_budget', 'labor_estimate', 'material_estimate',
                 'amount_left_on_contract', 'percent_complete'].includes(key)) {
                data[key] = parseFloat(value) || 0;
            } else if (key === 'number_of_units') {
                data[key] = parseInt(value) || null;
            } else {
                data[key] = value;
            }
        }
    });

    const jobId = {{ job.id if job else 'null' }};
    const method = jobId ? 'PUT' : 'POST';
    const url = jobId ? `/api/jobs/${jobId}` : '/api/jobs';

    try {
        const response = await fetch(url, {
            method: method,
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });

        if (response.ok) {
            window.location.href = '/jobs';
        } else {
            const error = await response.json();
            alert('Error saving job: ' + (error.message || 'Unknown error'));
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Error saving job');
    }
});
</script>
{% endblock %}