{% extends "base.html" %}

{% block title %}
Case {{ case.file_no if case else '' }} · Delphi Database
{% endblock %}

{% block content %}
<div class="row g-3">
    <div class="col-12 d-flex align-items-center">
        <a class="btn btn-sm btn-outline-secondary me-2" href="/dashboard">
            <i class="bi bi-arrow-left"></i>
            Back
        </a>
        <h2 class="mb-0">Case Details</h2>
    </div>

    {% if error %}
        <div class="col-12">
            <div class="alert alert-danger" role="alert">{{ error }}</div>
        </div>
    {% endif %}

    {% if saved %}
        <div class="col-12">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle me-2"></i>
                Case updated successfully!
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
    {% endif %}

    {% if errors %}
        <div class="col-12">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <strong>Please fix the following errors:</strong>
                <ul class="mb-0 mt-2">
                    {% for error in errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
    {% endif %}

    {% if case %}
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <div class="text-muted small">File #</div>
                        <div class="fw-semibold">{{ case.file_no }}</div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-muted small">Status</div>
                        <div>
                            {% if case.status == 'active' %}
                                <span class="badge bg-success">Active</span>
                            {% elif case.status == 'closed' %}
                                <span class="badge bg-secondary">Closed</span>
                            {% else %}
                                <span class="badge bg-light text-dark">{{ case.status or 'n/a' }}</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-muted small">Type</div>
                        <div>{{ case.case_type or '' }}</div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-muted small">Opened</div>
                        <div>{{ case.open_date.strftime('%Y-%m-%d') if case.open_date else '' }}</div>
                    </div>
                </div>

                <div class="row mb-3">
                    {% set client = case.client %}
                    <div class="col-md-4">
                        <div class="text-muted small">Client</div>
                        <div>
                            {% if client %}
                                {{ client.last_name }}, {{ client.first_name }}
                            {% else %}
                                <span class="text-muted">Unknown</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-muted small">Company</div>
                        <div>{{ client.company if client else '' }}</div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-muted small">City/State</div>
                        <div>
                            {% if client %}
                                {{ client.city or '' }}{% if client.state %}, {{ client.state }}{% endif %}
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="mb-2 text-muted small">Description</div>
                <p class="mb-0">{{ case.description or '' }}</p>
            </div>
        </div>
    </div>

    <!-- Edit Case Form -->
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Edit Case</h5>
                <div>
                    {% if case.status == 'active' %}
                        <form method="post" action="/case/{{ case.id }}/close" class="d-inline me-2">
                            <button type="submit" class="btn btn-sm btn-outline-danger"
                                    onclick="return confirm('Are you sure you want to close this case?')">
                                <i class="bi bi-x-circle me-1"></i>Close Case
                            </button>
                        </form>
                    {% endif %}
                    {% if case.status == 'closed' %}
                        <form method="post" action="/case/{{ case.id }}/reopen" class="d-inline me-2">
                            <button type="submit" class="btn btn-sm btn-outline-success"
                                    onclick="return confirm('Are you sure you want to reopen this case?')">
                                <i class="bi bi-check-circle me-1"></i>Reopen Case
                            </button>
                        </form>
                    {% endif %}
                </div>
            </div>
            <div class="card-body">
                <form method="post" action="/case/{{ case.id }}/update">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-select" id="status" name="status">
                                <option value="active" {% if case.status == 'active' %}selected{% endif %}>Active</option>
                                <option value="closed" {% if case.status == 'closed' %}selected{% endif %}>Closed</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label for="case_type" class="form-label">Case Type</label>
                            <input type="text" class="form-control" id="case_type" name="case_type"
                                   value="{{ case.case_type or '' }}">
                        </div>

                        <div class="col-12">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="3">{{ case.description or '' }}</textarea>
                        </div>

                        <div class="col-md-6">
                            <label for="open_date" class="form-label">Open Date</label>
                            <input type="date" class="form-control" id="open_date" name="open_date"
                                   value="{{ case.open_date.strftime('%Y-%m-%d') if case.open_date else '' }}">
                        </div>

                        <div class="col-md-6">
                            <label for="close_date" class="form-label">Close Date</label>
                            <input type="date" class="form-control" id="close_date" name="close_date"
                                   value="{{ case.close_date.strftime('%Y-%m-%d') if case.close_date else '' }}">
                        </div>

                        <div class="col-12">
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-lg me-1"></i>Save Changes
                                </button>
                                <a href="/case/{{ case.id }}" class="btn btn-outline-secondary">Cancel</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card h-100">
            <div class="card-header">Transactions</div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 110px;">Date</th>
                                <th>Type</th>
                                <th class="text-end" style="width: 120px;">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if case.transactions and case.transactions|length > 0 %}
                                {% for t in case.transactions %}
                                <tr>
                                    <td>{{ t.transaction_date.strftime('%Y-%m-%d') if t.transaction_date else '' }}</td>
                                    <td>{{ t.transaction_type or '' }}</td>
                                    <td class="text-end">{{ '%.2f'|format(t.amount) if t.amount is not none else '' }}</td>
                                </tr>
                                {% endfor %}
                            {% else %}
                                <tr><td colspan="3" class="text-center text-muted py-3">No transactions.</td></tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card h-100">
            <div class="card-header">Documents</div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Type</th>
                                <th>File</th>
                                <th style="width: 120px;">Uploaded</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if case.documents and case.documents|length > 0 %}
                                {% for d in case.documents %}
                                <tr>
                                    <td>{{ d.document_type or '' }}</td>
                                    <td>{{ d.file_name or '' }}</td>
                                    <td>{{ d.uploaded_date.strftime('%Y-%m-%d') if d.uploaded_date else '' }}</td>
                                </tr>
                                {% endfor %}
                            {% else %}
                                <tr><td colspan="3" class="text-center text-muted py-3">No documents.</td></tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card h-100">
            <div class="card-header">Payments</div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 110px;">Date</th>
                                <th>Type</th>
                                <th class="text-end" style="width: 120px;">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if case.payments and case.payments|length > 0 %}
                                {% for p in case.payments %}
                                <tr>
                                    <td>{{ p.payment_date.strftime('%Y-%m-%d') if p.payment_date else '' }}</td>
                                    <td>{{ p.payment_type or '' }}</td>
                                    <td class="text-end">{{ '%.2f'|format(p.amount) if p.amount is not none else '' }}</td>
                                </tr>
                                {% endfor %}
                            {% else %}
                                <tr><td colspan="3" class="text-center text-muted py-3">No payments.</td></tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}