{% extends 'admin_panel/base.html' %}
{% load static %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/posyandu/posyandu_detail.css' %}">
<style>

    .page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 30px;
        margin-bottom: 30px;
    }
    .age-range {
        background: #e3f2fd;
        color: #1565c0;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 0.9rem;
        font-weight: 500;
    }
    .stats-card {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        margin-bottom: 20px;
    }
    .stats-number {
        font-size: 2rem;
        font-weight: bold;
        color: #007bff;
    }
    .recent-record {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        transition: all 0.3s ease;
    }
    .recent-record:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .record-date {
        font-size: 0.8rem;
        color: #6c757d;
    }
    .no-data {
        text-align: center;
        padding: 40px;
        color: #6c757d;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">

    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-md-8">
                <div class="d-flex align-items-center mb-2">
                    <a href="{% url 'admin_panel:posyandu:patient_types' %}" class="btn btn-outline-light btn-sm me-3">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Kembali
                    </a>
                    <h2 class="mb-0">
                        <i class="fas fa-user-tag mr-3"></i>
                        {{ page_title }}
                    </h2>
                </div>
                <p class="mb-0 opacity-75">{{ page_subtitle }}</p>
            </div>
            <div class="col-md-4 text-right">
                <a href="{% url 'admin_panel:posyandu:patient_types' %}" class="btn btn-light mr-2">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Kembali
                </a>
                <a href="{% url 'admin_panel:posyandu:patient_type_update' patient_type.id %}" class="btn btn-warning">
                    <i class="fas fa-edit mr-2"></i>
                    Edit
                </a>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-md-8">
            <div class="info-card">
                <h5 class="mb-4">
                    <i class="fas fa-info-circle mr-2"></i>
                    Informasi Jenis Pasien
                </h5>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="font-weight-bold text-muted">Nama:</label>
                            <p class="mb-0">{{ patient_type.name }}</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="font-weight-bold text-muted">Kode:</label>
                            <p class="mb-0"><code>{{ patient_type.code }}</code></p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="font-weight-bold text-muted">Status:</label>
                            <div>
                                <span class="status-badge {% if patient_type.is_active %}status-active{% else %}status-inactive{% endif %}">
                                    {% if patient_type.is_active %}Aktif{% else %}Tidak Aktif{% endif %}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="font-weight-bold text-muted">Rentang Usia:</label>
                            <div>
                                {% if patient_type.age_min or patient_type.age_max %}
                                    <span class="age-range">
                                        {% if patient_type.age_min and patient_type.age_max %}
                                            {{ patient_type.age_min }} - {{ patient_type.age_max }} tahun
                                        {% elif patient_type.age_min %}
                                            {{ patient_type.age_min }}+ tahun
                                        {% elif patient_type.age_max %}
                                            ≤ {{ patient_type.age_max }} tahun
                                        {% endif %}
                                    </span>
                                {% else %}
                                    <span class="text-muted">Tidak ada batasan usia</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                {% if patient_type.description %}
                    <div class="mb-3">
                        <label class="font-weight-bold text-muted">Deskripsi:</label>
                        <p class="mb-0">{{ patient_type.description }}</p>
                    </div>
                {% endif %}

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="font-weight-bold text-muted">Dibuat:</label>
                            <p class="mb-0">{{ patient_type.created_at|date:"d F Y, H:i" }}</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="font-weight-bold text-muted">Diperbarui:</label>
                            <p class="mb-0">{{ patient_type.updated_at|date:"d F Y, H:i" }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="stats-card">
                <div class="stats-number">{{ health_records_count }}</div>
                <p class="mb-0">Rekam Kesehatan</p>
                <small class="text-muted">Total penggunaan</small>
            </div>

            <div class="info-card">
                <h6 class="mb-3">
                    <i class="fas fa-chart-bar mr-2"></i>
                    Aksi Cepat
                </h6>
                <div class="d-grid gap-2">
                    <a href="{% url 'admin_panel:posyandu:patient_type_update' patient_type.id %}" class="btn btn-warning btn-sm">
                        <i class="fas fa-edit mr-2"></i>
                        Edit Jenis Pasien
                    </a>
                    <a href="{% url 'admin_panel:posyandu:health_record_create' %}" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus mr-2"></i>
                        Buat Rekam Kesehatan
                    </a>
                    <button type="button" class="btn btn-danger btn-sm delete-patient-type-btn">
                        <i class="fas fa-trash mr-2"></i>
                        Hapus Jenis Pasien
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="info-card">
                <h5 class="mb-4">
                    <i class="fas fa-history mr-2"></i>
                    Rekam Kesehatan Terbaru
                </h5>

                {% if recent_records %}
                    <div class="row">
                        {% for record in recent_records %}
                            <div class="col-md-6 col-lg-4">
                                <div class="recent-record">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h6 class="mb-0">{{ record.patient.name }}</h6>
                                        <span class="record-date">{{ record.visit_date|date:"d M Y" }}</span>
                                    </div>
                                    <p class="mb-1 small text-muted">NIK: {{ record.patient.nik }}</p>
                                    {% if record.diagnosis %}
                                        <p class="mb-1 small">
                                            <strong>Diagnosis:</strong> {{ record.diagnosis|truncatechars:50 }}
                                        </p>
                                    {% endif %}
                                    <div class="d-flex justify-content-between align-items-center">
                                        <small class="text-muted">{{ record.posyandu.name }}</small>
                                        <a href="{% url 'admin_panel:posyandu:health_record_detail' record.id %}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>

                    {% if health_records_count > 10 %}
                        <div class="text-center mt-3">
                            <a href="{% url 'admin_panel:posyandu:health_records' %}?patient_type={{ patient_type.code }}" class="btn btn-outline-primary">
                                <i class="fas fa-list mr-2"></i>
                                Lihat Semua Rekam Kesehatan
                            </a>
                        </div>
                    {% endif %}
                {% else %}
                    <div class="no-data">
                        <i class="fas fa-file-medical fa-3x mb-3"></i>
                        <h6>Belum ada rekam kesehatan</h6>
                        <p class="text-muted">Jenis pasien ini belum digunakan dalam rekam kesehatan</p>
                        <a href="{% url 'admin_panel:posyandu:health_record_create' %}" class="btn btn-primary">
                            <i class="fas fa-plus mr-2"></i>
                            Buat Rekam Kesehatan Pertama
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi Delete -->
<div class="modal fade" id="deletePatientTypeModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Konfirmasi Hapus
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="mb-0">Apakah Anda yakin ingin menghapus jenis pasien ini?</p>
                <p class="text-muted small mb-0">Tindakan ini tidak dapat dibatalkan dan akan mempengaruhi data terkait.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="confirmDeletePatientTypeBtn">
                    <i class="fas fa-trash mr-1"></i> Hapus
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>$(document).ready(function() {
    $('.delete-patient-type-btn').on('click', function(e) {
        e.preventDefault();
        $('#deletePatientTypeModal').modal('show');
    });
    
    $('#confirmDeletePatientTypeBtn').on('click', function() {
        const patientTypeId = {{ patient_type.id }};
        window.location.href = '{% url "admin_panel:posyandu:patient_type_delete" patient_type.id %}';
    });
});
</script>
{% endblock %}