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

{% block extra_css %}
<style>
.delete-confirm-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
    padding: 2rem 0;
}

.delete-confirm-header {
    background: #ffffff;
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
    text-align: center;
}

.delete-confirm-title {
    font-size: 2rem;
    font-weight: 700;
    color: #dc3545;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.delete-confirm-subtitle {
    color: #6c757d;
    margin: 0.5rem 0 0 0;
    font-size: 1.1rem;
}

.patient-type-info-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    overflow: hidden;
}

.patient-type-info-header {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    padding: 1rem;
    border-bottom: none;
}

.patient-type-info-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.patient-type-info-body {
    padding: 1.5rem;
}

.patient-type-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f8f9fa;
}

.patient-type-info-item:last-child {
    border-bottom: none;
}

.patient-type-info-label {
    font-weight: 600;
    color: #495057;
}

.patient-type-info-value {
    color: #6c757d;
}

.warning-section {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 2rem;
}

.warning-title {
    color: #856404;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.warning-text {
    color: #856404;
    margin: 0;
}

.action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.btn-cancel {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    border: 2px solid #6c757d;
    color: #6c757d;
    background: white;
    cursor: pointer;
}

.btn-cancel:hover {
    background: #6c757d;
    color: white;
    transform: translateY(-2px);
    text-decoration: none;
}

.btn-delete {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    border: none;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
    cursor: pointer;
}

.btn-delete:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
    color: white;
    text-decoration: none;
}

@media (max-width: 767px) {
    .delete-confirm-header {
        padding: 1.5rem;
    }

    .delete-confirm-title {
        font-size: 1.5rem;
    }

    .patient-type-info-body {
        padding: 1rem;
    }

    .action-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-cancel,
    .btn-delete {
        width: 100%;
        max-width: 300px;
    }
}
</style>
{% endblock extra_css %}

{% block content %}
<div class="delete-confirm-container">
    <div class="delete-confirm-header">
        <h1 class="delete-confirm-title">
            <i class="fas fa-exclamation-triangle"></i>Konfirmasi Penghapusan
        </h1>
        <p class="delete-confirm-subtitle">Anda akan menghapus jenis pasien dan semua data terkait</p>
    </div>

    <div class="patient-type-info-card">
        <div class="patient-type-info-header">
            <h5 class="patient-type-info-title">Informasi Jenis Pasien</h5>
        </div>
        <div class="patient-type-info-body">
            <div class="patient-type-info-item">
                <span class="patient-type-info-label">Nama Jenis Pasien:</span>
                <span class="patient-type-info-value">{{ patient_type.name }}</span>
            </div>
            <div class="patient-type-info-item">
                <span class="patient-type-info-label">Deskripsi:</span>
                <span class="patient-type-info-value">{{ patient_type.description|default:"-" }}</span>
            </div>
            <div class="patient-type-info-item">
                <span class="patient-type-info-label">Usia Minimum:</span>
                <span class="patient-type-info-value">{{ patient_type.min_age|default:"-" }} bulan</span>
            </div>
            <div class="patient-type-info-item">
                <span class="patient-type-info-label">Usia Maksimum:</span>
                <span class="patient-type-info-value">{{ patient_type.max_age|default:"-" }} bulan</span>
            </div>
            <div class="patient-type-info-item">
                <span class="patient-type-info-label">Status:</span>
                <span class="patient-type-info-value">
                    {% if patient_type.is_active %}
                        <span class="badge badge-success">Aktif</span>
                    {% else %}
                        <span class="badge badge-secondary">Non-Aktif</span>
                    {% endif %}
                </span>
            </div>
        </div>
    </div>

    <div class="warning-section">
        <h6 class="warning-title">
            <i class="fas fa-exclamation-triangle"></i> Peringatan
        </h6>
        <p class="warning-text">
            Tindakan ini akan menghapus jenis pasien "{{ patient_type.name }}" dan semua data terkait. 
            Tindakan ini tidak dapat dibatalkan. Pastikan Anda benar-benar yakin sebelum melanjutkan.
        </p>
    </div>

    <div class="action-buttons">
        <a href="{% url 'admin_panel:posyandu:patient_types' %}" class="btn-cancel">
            <i class="fas fa-arrow-left"></i>Batal
        </a>
        <form method="post" action="{% url 'admin_panel:posyandu:patient_type_delete' patient_type.id %}" style="display: inline;">
            {% csrf_token %}
            <button type="submit" class="btn-delete" onclick="return confirm('Apakah Anda yakin ingin menghapus jenis pasien ini? Tindakan ini tidak dapat dibatalkan.')">
                <i class="fas fa-trash"></i>Ya, Hapus
            </button>
        </form>
    </div>
</div>
{% endblock content %}