{% extends 'base.html' %}
{% block page_title %}{{ c.type_label }} — {{ c.employee.name }}{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4">
    <div>
        <a href="{{ url_for('lifecycle_index') }}" class="text-muted text-decoration-none" style="font-size:0.85rem;">
            <i class="bi bi-arrow-left me-1"></i>Back
        </a>
        <div class="d-flex align-items-center gap-2 mt-2 mb-1">
            <span class="badge" style="background:{% if c.checklist_type=='onboarding' %}#1b6b3a{% else %}#dc3545{% endif %};
                   color:#fff;font-size:0.72rem;">
                {{ c.type_label }}
            </span>
            <span class="badge" style="background:{{ c.status_color }};color:#fff;font-size:0.7rem;">
                {{ c.status_label }}
            </span>
        </div>
        <h4 class="fw-bold mb-0">{{ c.employee.name }}</h4>
        <div style="font-size:0.82rem;color:#888;">
            {{ c.employee.job_title or c.employee.role.replace('_',' ').title() }}
        </div>
    </div>
    {% if is_hr %}
    <form method="POST" action="{{ url_for('lifecycle_checklist_delete', checklist_id=c.id) }}"
        onsubmit="return confirm('Delete this checklist?')">
        <button class="btn btn-outline-danger"><i class="bi bi-trash"></i></button>
    </form>
    {% endif %}
</div>

<!-- PROGRESS -->
<div class="card mb-4">
    <div class="card-body p-3">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="fw-bold" style="font-size:0.88rem;">Checklist Progress</span>
            <span style="font-size:1.1rem;font-weight:700;color:{{ c.status_color }};">
                {{ c.progress_pct }}%
            </span>
        </div>
        <div class="progress" style="height:8px;">
            <div class="progress-bar" style="width:{{ c.progress_pct }}%;
        background:{{ c.status_color }};"></div>
        </div>
    </div>
</div>

<!-- OFFBOARDING DETAILS -->
{% if c.checklist_type == 'offboarding' %}
<div class="card mb-4">
    <div class="card-body p-3">
        <div class="row g-3" style="font-size:0.85rem;">
            <div class="col-md-4">
                <strong style="color:#888;">Reason:</strong><br>{{ c.exit_reason_label }}
            </div>
            <div class="col-md-4">
                <strong style="color:#888;">Last Working Day:</strong><br>
                {{ c.last_working_day|format_date if c.last_working_day else '—' }}
            </div>
            <div class="col-md-4">
                <strong style="color:#888;">Initiated By:</strong><br>
                {{ c.initiator.name if c.initiator else '—' }}
            </div>
            {% if c.exit_reason_notes %}
            <div class="col-12">
                <strong style="color:#888;">Notes:</strong><br>{{ c.exit_reason_notes }}
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- ASSIGNED ASSETS -->
{% if assigned_assets %}
<div class="card mb-4" style="border-left:4px solid #f0a500;">
    <div class="card-body p-3">
        <h6 class="fw-bold mb-2" style="font-size:0.87rem;color:#f0a500;">
            <i class="bi bi-box-seam me-2"></i>Assets Currently Assigned
        </h6>
        <p style="font-size:0.78rem;color:#888;margin-bottom:8px;">
            Confirm these are returned, then tick "All assets returned" below.
        </p>
        <ul style="font-size:0.85rem;margin-bottom:0;">
            {% for asset in assigned_assets %}
            <li>{{ asset.asset_name }} ({{ asset.category_label }}) — {{ asset.asset_tag or '—' }}</li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endif %}
{% endif %}

<!-- CHECKLIST ITEMS -->
<div class="card mb-4">
    <div class="card-header">
        <span class="fw-bold" style="font-size:0.9rem;">
            <i class="bi bi-list-check me-2"></i>Checklist Items
        </span>
    </div>
    <div class="card-body p-3">
        {% for item in c.items %}
        <form method="POST" action="{{ url_for('lifecycle_item_update', item_id=item.id) }}" class="mb-2 p-2" style="background:{% if item.is_completed %}#f0fff4{% else %}#f8f9fa{% endif %};
                 border-radius:8px;">
            <div class="d-flex justify-content-between align-items-start">
                <div class="form-check flex-grow-1">
                    <input class="form-check-input" type="checkbox" name="is_completed" id="item{{ item.id }}" {% if
                        item.is_completed %}checked{% endif %} onchange="this.form.submit()">
                    <label class="form-check-label" for="item{{ item.id }}" style="font-size:0.87rem;
                        {% if item.is_completed %}text-decoration:line-through;color:#888;{% endif %}">
                        {{ item.title }}
                    </label>
                    <span class="badge ms-1" style="background:#f0f0f0;color:#555;font-size:0.65rem;">
                        {{ item.category.title() }}
                    </span>
                </div>
                {% if item.is_completed %}
                <span style="font-size:0.7rem;color:#1b6b3a;white-space:nowrap;">
                    ✓ {{ item.completer.name if item.completer else '' }}
                    {% if item.completed_at %}· {{ item.completed_at.strftime('%d %b') }}{% endif %}
                </span>
                {% endif %}
            </div>
            <div class="d-flex gap-2 mt-2">
                <textarea name="notes" class="form-control form-control-sm" rows="1"
                    placeholder="Notes (optional)">{{ item.notes or '' }}</textarea>
                <button type="submit" class="btn btn-sm btn-outline-primary" style="font-size:0.72rem;">Save</button>
            </div>
        </form>
        {% else %}
        <div class="text-center py-3 text-muted" style="font-size:0.85rem;">
            No checklist items.
        </div>
        {% endfor %}
    </div>
</div>

<!-- EXIT INTERVIEW (offboarding only) -->
{% if c.checklist_type == 'offboarding' and is_hr %}
<div class="card mb-4" style="border-left:4px solid #6f42c1;">
    <div class="card-body p-3">
        <h6 class="fw-bold mb-3" style="font-size:0.87rem;color:#6f42c1;">
            <i class="bi bi-chat-left-text me-2"></i>Exit Interview
        </h6>
        <form method="POST" action="{{ url_for('lifecycle_exit_interview_save', checklist_id=c.id) }}">
            <div class="row g-2">
                <div class="col-12">
                    <label class="form-label">Detailed Reason for Leaving</label>
                    <textarea name="reason_detail" class="form-control"
                        rows="2">{{ c.exit_interview.reason_detail if c.exit_interview else '' }}</textarea>
                </div>
                <div class="col-12">
                    <label class="form-label">Feedback on Their Role</label>
                    <textarea name="feedback_role" class="form-control"
                        rows="2">{{ c.exit_interview.feedback_role if c.exit_interview else '' }}</textarea>
                </div>
                <div class="col-12">
                    <label class="form-label">Feedback on Management</label>
                    <textarea name="feedback_management" class="form-control"
                        rows="2">{{ c.exit_interview.feedback_management if c.exit_interview else '' }}</textarea>
                </div>
                <div class="col-12">
                    <label class="form-label">Feedback on the Organisation</label>
                    <textarea name="feedback_organisation" class="form-control"
                        rows="2">{{ c.exit_interview.feedback_organisation if c.exit_interview else '' }}</textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Overall Satisfaction (1-5)</label>
                    <select name="overall_rating" class="form-select">
                        <option value="">— Select —</option>
                        {% for v, l in [(1,'1 - Very Dissatisfied'),(2,'2 - Dissatisfied'),
                        (3,'3 - Neutral'),(4,'4 - Satisfied'),(5,'5 - Very Satisfied')] %}
                        <option value="{{ v }}" {% if c.exit_interview and c.exit_interview.overall_rating==v
                            %}selected{% endif %}>
                            {{ l }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-6 d-flex align-items-center">
                    <div class="form-check mt-4">
                        <input class="form-check-input" type="checkbox" name="would_recommend" id="wouldRecommend" {% if
                            c.exit_interview and c.exit_interview.would_recommend %}checked{% endif %}>
                        <label class="form-check-label" for="wouldRecommend">
                            Would recommend this organisation as an employer
                        </label>
                    </div>
                </div>
                <div class="col-12">
                    <label class="form-label">Suggestions for Improvement</label>
                    <textarea name="suggestions" class="form-control"
                        rows="2">{{ c.exit_interview.suggestions if c.exit_interview else '' }}</textarea>
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary mt-2">
                        <i class="bi bi-save me-1"></i>Save Exit Interview
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endif %}

<!-- CLEARANCE CERTIFICATE -->
{% if c.checklist_type == 'offboarding' %}
<div class="card mb-4" style="border-left:4px solid
     {% if c.clearance_issued %}#1b6b3a{% else %}#888{% endif %};">
    <div class="card-body p-3">
        <h6 class="fw-bold mb-2" style="font-size:0.87rem;">
            <i class="bi bi-patch-check me-2"></i>Clearance Certificate
        </h6>
        {% if c.clearance_issued %}
        <p style="font-size:0.85rem;color:#1b6b3a;">
            ✓ Issued by {{ c.clearance_issuer.name if c.clearance_issuer else '—' }}
            on {{ c.clearance_issued_at.strftime('%d %b %Y') }} —
            Code: <strong>{{ c.clearance_code }}</strong>
        </p>
        <a href="{{ url_for('lifecycle_clearance_print', checklist_id=c.id) }}" target="_blank"
            class="btn btn-sm btn-outline-primary">
            <i class="bi bi-printer me-1"></i>Print Certificate
        </a>
        {% elif is_hr %}
        <p style="font-size:0.82rem;color:#888;">
            Issue once all checklist items above are completed.
        </p>
        <form method="POST" action="{{ url_for('lifecycle_clearance_issue', checklist_id=c.id) }}"
            onsubmit="return confirm('Issue clearance certificate? This confirms all items are complete.')">
            <button class="btn btn-success">
                <i class="bi bi-patch-check me-1"></i>Issue Clearance Certificate
            </button>
        </form>
        {% else %}
        <p style="font-size:0.82rem;color:#888;">Not yet issued.</p>
        {% endif %}
    </div>
</div>
{% endif %}

<!-- MARK COMPLETE -->
{% if is_hr and c.status == 'in_progress' %}
<div class="card mb-4">
    <div class="card-body p-3 d-flex justify-content-between align-items-center">
        <div style="font-size:0.85rem;">
            <strong>Finish up?</strong>
            {% if c.checklist_type == 'offboarding' %}
            Marking complete will deactivate {{ c.employee.name }}'s account.
            {% else %}
            Marking complete closes this onboarding checklist.
            {% endif %}
        </div>
        <form method="POST" action="{{ url_for('lifecycle_checklist_complete', checklist_id=c.id) }}"
            onsubmit="return confirm('Are you sure you want to mark this complete?')">
            <button class="btn btn-primary">
                <i class="bi bi-check2-circle me-1"></i>Mark Checklist Complete
            </button>
        </form>
    </div>
</div>
{% endif %}
{% endblock %}