{% extends "base.html" %}
{% load static %}

{% block title %}{{ object.title }} - Consent Forms{% endblock %}

{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{% url 'patients:patient_list' %}">Patients</a></li>
    <li class="breadcrumb-item"><a href="{% url 'patients:consent_form_list' %}">Consent Forms</a></li>
    <li class="breadcrumb-item active">{{ object.title|truncatechars:30 }}</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    {{ object.title }}
    <small>Consent Form Details</small>
</h1>
<!-- END page-header -->

<div class="row">
    <div class="col-xl-8">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Form Content</h4>
                <div class="panel-heading-btn">
                    <button type="button" class="btn btn-primary btn-sm me-2" onclick="previewForm()">
                        <i class="fa fa-eye me-2"></i>Preview
                    </button>
                    <button type="button" class="btn btn-info btn-sm me-2" onclick="printForm()">
                        <i class="fa fa-print me-2"></i>Print
                    </button>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
            </div>
            <div class="panel-body">
                <div class="form-content">
                    {{ object.content|safe }}
                </div>
            </div>
        </div>
        <!-- END panel -->
    </div>

    <div class="col-xl-4">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Form Information</h4>
                <div class="panel-heading-btn">
                    <a href="{% url 'patients:consent_form_update' object.pk %}" class="btn btn-primary btn-sm">
                        <i class="fa fa-edit me-2"></i>Edit
                    </a>
                </div>
            </div>
            <div class="panel-body">
                <table class="table table-borderless">
                    <tr>
                        <td class="fw-bold" width="100">Status:</td>
                        <td>
                            <span class="badge bg-{% if object.status == 'ACTIVE' %}success{% elif object.status == 'DRAFT' %}warning{% elif object.status == 'REVIEW' %}info{% elif object.status == 'ARCHIVED' %}secondary{% else %}danger{% endif %}">
                                {{ object.get_status_display }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Category:</td>
                        <td>
                            <span class="badge bg-{% if object.category == 'SURGICAL' %}danger{% elif object.category == 'TREATMENT' %}primary{% elif object.category == 'RESEARCH' %}info{% elif object.category == 'PRIVACY' %}dark{% elif object.category == 'FINANCIAL' %}success{% else %}secondary{% endif %}">
                                {{ object.get_category_display }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Required:</td>
                        <td>
                            {% if object.is_required %}
                            <span class="text-danger">
                                <i class="fa fa-exclamation-triangle me-1"></i>Required
                            </span>
                            {% else %}
                            <span class="text-muted">Optional</span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Version:</td>
                        <td><span class="badge bg-light text-dark">v{{ object.version }}</span></td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Created:</td>
                        <td>{{ object.created_at|date:"M d, Y H:i" }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Updated:</td>
                        <td>{{ object.updated_at|date:"M d, Y H:i" }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Created By:</td>
                        <td>{{ object.created_by.get_full_name }}</td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- END panel -->

        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Usage Statistics</h4>
            </div>
            <div class="panel-body">
                <div class="row text-center">
                    <div class="col-6">
                        <div class="fs-24px fw-bold text-success">{{ object.signed_count }}</div>
                        <div class="small text-muted">Signed</div>
                    </div>
                    <div class="col-6">
                        <div class="fs-24px fw-bold text-warning">{{ object.pending_count }}</div>
                        <div class="small text-muted">Pending</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END panel -->

        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Quick Actions</h4>
            </div>
            <div class="panel-body">
                <div class="d-grid gap-2">
                    <a href="{% url 'patients:consent_form_update' object.pk %}" class="btn btn-primary">
                        <i class="fa fa-edit me-2"></i>Edit Form
                    </a>
                    <button type="button" class="btn btn-info" onclick="duplicateForm()">
                        <i class="fa fa-copy me-2"></i>Duplicate Form
                    </button>
                    <button type="button" class="btn btn-success" onclick="exportForm()">
                        <i class="fa fa-download me-2"></i>Export Form
                    </button>
                    {% if object.status == 'DRAFT' %}
                    <button type="button" class="btn btn-warning" onclick="activateForm()">
                        <i class="fa fa-check me-2"></i>Activate Form
                    </button>
                    {% elif object.status == 'ACTIVE' %}
                    <button type="button" class="btn btn-secondary" onclick="archiveForm()">
                        <i class="fa fa-archive me-2"></i>Archive Form
                    </button>
                    {% endif %}
                    <a href="{% url 'patients:consent_form_delete' object.pk %}" class="btn btn-danger">
                        <i class="fa fa-trash me-2"></i>Delete Form
                    </a>
                </div>
            </div>
        </div>
        <!-- END panel -->
    </div>
</div>
{% endblock %}

{% block js %}
<script>
function previewForm() {
    window.open('{% url "patients:consent_form_preview" object.pk %}', '_blank');
}

function printForm() {
    window.print();
}

function duplicateForm() {
    if (confirm('Create a copy of this consent form?')) {
        $.ajax({
            url: '{% url "patients:consent_form_duplicate" object.pk %}',
            method: 'POST',
            success: function(response) {
                toastr.success('Form duplicated successfully');
                setTimeout(function() {
                    window.location.href = response.redirect_url;
                }, 1000);
            },
            error: function() {
                toastr.error('Failed to duplicate form');
            }
        });
    }
}

function exportForm() {
    window.open('{% url "patients:consent_form_export" object.pk %}', '_blank');
}

function activateForm() {
    if (confirm('Activate this consent form? It will become available for patient signatures.')) {
        $.ajax({
            url: '{% url "patients:consent_form_activate" object.pk %}',
            method: 'POST',
            success: function() {
                toastr.success('Form activated successfully');
                location.reload();
            },
            error: function() {
                toastr.error('Failed to activate form');
            }
        });
    }
}

function archiveForm() {
    if (confirm('Archive this consent form? It will no longer be available for new signatures.')) {
        $.ajax({
            url: '{% url "patients:consent_form_archive" object.pk %}',
            method: 'POST',
            success: function() {
                toastr.success('Form archived successfully');
                location.reload();
            },
            error: function() {
                toastr.error('Failed to archive form');
            }
        });
    }
}
</script>
{% endblock %}