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

{% block page_title %}Data Ibu Hamil{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/posyandu/posyandu_list.css' %}">
<style>
    /* Custom Responsive CSS for Ibu Hamil Page */
    
    /* Header Responsive */
    .ibu-hamil-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 15px;
        padding: 2rem;
        margin-bottom: 2rem;
        color: white;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    }
    
    .ibu-hamil-header h2 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .ibu-hamil-header p {
        font-size: 1rem;
        opacity: 0.9;
    }
    
    .ibu-hamil-header .btn-custom {
        border-radius: 10px;
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .ibu-hamil-header .btn-light:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    
    /* Stats Cards Responsive */
    .stats-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        margin-bottom: 1rem;
    }
    
    .stats-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.15);
    }
    
    .stats-number {
        font-size: 2.5rem;
        font-weight: 800;
        color: #667eea;
        margin-bottom: 0.5rem;
    }
    
    .stats-label {
        font-size: 0.875rem;
        color: #6c757d;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* Filter Section Responsive */
    .filter-section {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    .search-box {
        position: relative;
        margin-bottom: 1rem;
    }
    
    .search-box .form-control {
        padding-left: 45px;
        border-radius: 25px;
        border: 2px solid #e9ecef;
        height: 45px;
    }
    
    .search-box .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    
    .search-box .search-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #667eea;
        font-size: 1.1rem;
    }
    
    .filter-section .form-control {
        border-radius: 10px;
        border: 2px solid #e9ecef;
        height: 45px;
    }
    
    .filter-section .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    
    .filter-section .btn-custom {
        border-radius: 10px;
        height: 45px;
        font-weight: 600;
    }
    
    /* Table Container Responsive */
    .table-container {
        background: white;
        border-radius: 15px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        overflow: hidden;
        margin-bottom: 2rem;
    }
    
    .table {
        margin-bottom: 0;
    }
    
    .table thead th {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.85rem;
        padding: 1rem;
        border: none;
    }
    
    .table tbody tr {
        transition: all 0.3s ease;
    }
    
    .table tbody tr:hover {
        background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
        transform: scale(1.01);
    }
    
    .table tbody td {
        padding: 1rem;
        vertical-align: middle;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }
    
    /* Badges */
    .pregnancy-badge, .risk-badge, .status-badge {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        display: inline-block;
    }
    
    .pregnancy-badge.trimester-1 {
        background: #d4edda;
        color: #155724;
    }
    
    .pregnancy-badge.trimester-2 {
        background: #fff3cd;
        color: #856404;
    }
    
    .pregnancy-badge.trimester-3 {
        background: #f8d7da;
        color: #721c24;
    }
    
    .risk-badge.low {
        background: #d4edda;
        color: #155724;
    }
    
    .risk-badge.high {
        background: #f8d7da;
        color: #721c24;
    }
    
    .status-badge.active {
        background: #d4edda;
        color: #155724;
    }
    
    .status-badge.inactive {
        background: #f8d7da;
        color: #721c24;
    }
    
    /* Action Buttons */
    .action-buttons {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
    }
    
    .action-buttons .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.875rem;
        border-radius: 8px;
    }
    
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 3rem 1rem;
        color: #6c757d;
    }
    
    .empty-state i {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
    
    /* Pagination Responsive */
    .pagination-wrapper {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    .pagination {
        margin: 0;
        justify-content: center;
    }
    
    .pagination .page-item {
        margin: 0 2px;
    }
    
    .pagination .page-link {
        border-radius: 8px;
        border: 2px solid #e9ecef;
        color: #667eea;
        padding: 10px 16px;
        font-weight: 600;
    }
    
    .pagination .page-link:hover {
        background: #667eea;
        border-color: #667eea;
        color: white;
        transform: translateY(-2px);
    }
    
    .pagination .page-item.active .page-link {
        background: #667eea;
        border-color: #667eea;
        color: white;
    }
    
    .pagination .page-item.disabled .page-link {
        background: #f8f9fa;
        border-color: #e9ecef;
        color: #6c757d;
    }
    
    /* Custom Alert System */
    .custom-alert {
        position: fixed;
        top: 20px;
        right: 20px;
        min-width: 300px;
        z-index: 9999;
        animation: slideIn 0.3s ease-out;
    }
    
    @keyframes slideIn {
        from {
            transform: translateX(400px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    /* Mobile Responsive Styles */
    @media (max-width: 768px) {
        /* Container Spacing */
        .container-fluid {
            padding-left: 0.75rem !important;
            padding-right: 0.75rem !important;
            padding-top: 0.5rem !important;
        }
        
        /* Reduce spacing between navbar and content */
        .container-fluid > .ibu-hamil-header:first-child {
            margin-top: 0 !important;
        }
        
        .ibu-hamil-header {
            padding: 1.25rem 1rem;
            margin-bottom: 1rem;
            border-radius: 12px;
        }
        
        .ibu-hamil-header .row {
            margin: 0 !important;
        }
        
        .ibu-hamil-header .col-md-8,
        .ibu-hamil-header .col-md-4 {
            padding: 0 !important;
        }
        
        .ibu-hamil-header h2 {
            font-size: 1.4rem !important;
            margin-bottom: 0.35rem !important;
        }
        
        .ibu-hamil-header h2 .mr-3 {
            margin-right: 0.5rem !important;
        }
        
        .ibu-hamil-header p {
            font-size: 0.85rem;
            margin-bottom: 0.75rem !important;
        }
        
        .ibu-hamil-header .btn-custom {
            font-size: 0.85rem;
            padding: 0.6rem 1rem;
            width: 100%;
            margin-bottom: 0.5rem;
            margin-left: 0 !important;
        }
        
        .ibu-hamil-header .btn-custom:last-child {
            margin-bottom: 0;
        }
        
        .ibu-hamil-header .text-right {
            text-align: left !important;
            margin-top: 0.5rem;
        }
        
        /* Stats Section */
        .row.mb-4 {
            margin-bottom: 1rem !important;
            margin-left: -0.25rem !important;
            margin-right: -0.25rem !important;
        }
        
        /* Stats Cards - 2 columns on mobile */
        .row.mb-4 .col-md-3 {
            flex: 0 0 50%;
            max-width: 50%;
            padding: 0 0.25rem;
        }
        
        .stats-card {
            padding: 0.85rem 0.5rem;
            margin-bottom: 0.5rem;
            border-radius: 10px;
        }
        
        .stats-number {
            font-size: 1.65rem;
        }
        
        .stats-label {
            font-size: 0.7rem;
        }
        
        /* Filter Section */
        .filter-section {
            padding: 1rem;
        }
        
        .filter-section .row .col-md-4,
        .filter-section .row .col-md-3,
        .filter-section .row .col-md-2 {
            flex: 0 0 100%;
            max-width: 100%;
            margin-bottom: 0.75rem;
        }
        
        .filter-section .row .col-md-2:last-child {
            margin-bottom: 0;
        }
        
        .search-box .form-control,
        .filter-section .form-control {
            height: 42px;
            font-size: 0.875rem;
        }
        
        /* Table Horizontal Scroll */
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .table {
            min-width: 800px;
        }
        
        .table thead th {
            padding: 0.75rem 0.5rem;
            font-size: 0.75rem;
        }
        
        .table tbody td {
            padding: 0.75rem 0.5rem;
            font-size: 0.85rem;
        }
        
        .action-buttons {
            flex-direction: column;
            gap: 0.25rem;
        }
        
        .action-buttons .btn {
            width: 100%;
            padding: 0.3rem 0.5rem;
            font-size: 0.8rem;
        }
        
        /* Pagination Mobile Compact */
        .pagination-wrapper {
            padding: 0.75rem;
        }
        
        .pagination {
            gap: 0.25rem;
        }
        
        .pagination .page-item {
            margin: 0 !important;
        }
        
        .pagination .page-link {
            padding: 0.5rem 0.75rem;
            font-size: 0.85rem;
            min-width: auto;
        }
        
        /* Simplified page number display for mobile */
        .pagination .page-item.active .page-link {
            padding: 0.5rem 1rem;
            font-weight: 700;
        }
        
        /* Results Count */
        #resultsCount {
            font-size: 0.8rem;
            text-align: center;
            margin-bottom: 0.5rem;
        }
        
        #pageSizeSelector {
            font-size: 0.8rem;
            padding: 0.35rem 0.5rem;
        }
        
        .pagination-wrapper .d-flex {
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .pagination-wrapper .d-flex > div {
            justify-content: center;
        }
        
        .pagination-wrapper label {
            font-size: 0.75rem;
        }
        
        /* Custom Alert Mobile */
        .custom-alert {
            right: 10px;
            left: 10px;
            min-width: auto;
        }
    }
    
    @media (max-width: 576px) {
        /* Container Extra Tight */
        .container-fluid {
            padding-left: 0.5rem !important;
            padding-right: 0.5rem !important;
            padding-top: 0.35rem !important;
        }
        
        .ibu-hamil-header {
            padding: 1rem 0.75rem;
            margin-bottom: 0.85rem;
            border-radius: 10px;
        }
        
        .ibu-hamil-header h2 {
            font-size: 1.2rem !important;
            margin-bottom: 0.25rem !important;
        }
        
        .ibu-hamil-header h2 .fas {
            font-size: 1rem !important;
        }
        
        .ibu-hamil-header p {
            font-size: 0.8rem;
            margin-bottom: 0.6rem !important;
        }
        
        .ibu-hamil-header .btn-custom {
            font-size: 0.8rem;
            padding: 0.55rem 0.85rem;
        }
        
        /* Stats Extra Compact */
        .row.mb-4 {
            margin-bottom: 0.75rem !important;
        }
        
        .row.mb-4 .col-md-3 {
            padding: 0 0.2rem;
        }
        
        .stats-card {
            padding: 0.75rem 0.4rem;
            margin-bottom: 0.4rem;
        }
        
        .stats-number {
            font-size: 1.5rem;
            margin-bottom: 0.35rem;
        }
        
        .stats-label {
            font-size: 0.65rem;
        }
        
        .filter-section {
            padding: 0.75rem;
        }
        
        .table thead th {
            padding: 0.5rem 0.35rem;
            font-size: 0.7rem;
        }
        
        .table tbody td {
            padding: 0.5rem 0.35rem;
            font-size: 0.8rem;
        }
        
        .pregnancy-badge, .risk-badge, .status-badge {
            padding: 4px 8px;
            font-size: 0.7rem;
        }
        
        /* Pagination Extra Compact for Small Mobile */
        .pagination-wrapper {
            padding: 0.5rem;
        }
        
        .pagination {
            gap: 0.15rem;
        }
        
        .pagination .page-link {
            padding: 0.4rem 0.6rem;
            font-size: 0.8rem;
            border-radius: 6px;
        }
        
        .pagination .page-item.active .page-link {
            padding: 0.4rem 0.75rem;
        }
        
        .pagination .page-link i {
            font-size: 0.75rem;
        }
        
        #pageSizeSelector {
            font-size: 0.75rem;
            padding: 0.3rem 0.4rem;
        }
        
        .pagination-wrapper label {
            font-size: 0.7rem;
        }
    }
    
    /* Scrollbar Styling */
    .table-responsive::-webkit-scrollbar {
        height: 8px;
    }
    
    .table-responsive::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .table-responsive::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 10px;
    }
    
    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #764ba2;
    }
</style>
{% endblock %}

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

    <div class="ibu-hamil-header">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h2 class="mb-2">
                    <i class="fas fa-baby mr-3"></i>
                    Data Ibu Hamil
                </h2>
                <p class="mb-0 opacity-75">Kelola data kehamilan dan kesehatan ibu hamil</p>
            </div>
            <div class="col-md-4 text-right">
                <a href="{% url 'admin_panel:posyandu:ibu_hamil_create' %}" class="btn btn-light btn-custom">
                    <i class="fas fa-plus mr-2"></i>
                    Tambah Data
                </a>
                <a href="{% url 'admin_panel:dashboard' %}" class="btn btn-outline-light btn-custom ml-2">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Kembali
                </a>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-number" id="totalIbuHamil">0</div>
                <div class="stats-label">Total Ibu Hamil</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card success">
                <div class="stats-number" id="trimester1">0</div>
                <div class="stats-label">Trimester 1</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card warning">
                <div class="stats-number" id="trimester2">0</div>
                <div class="stats-label">Trimester 2</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card info">
                <div class="stats-number" id="trimester3">0</div>
                <div class="stats-label">Trimester 3</div>
            </div>
        </div>
    </div>

    <div class="filter-section">
        <div class="row">
            <div class="col-md-4">
                <div class="search-box">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="form-control" id="searchInput" placeholder="Cari nama ibu hamil...">
                </div>
            </div>
            <div class="col-md-3">
                <select class="form-control" id="posyanduFilter">
                    <option value="">Semua Posyandu</option>
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-control" id="trimesterFilter">
                    <option value="">Semua Trimester</option>
                    <option value="1">Trimester 1 (0-12 minggu)</option>
                    <option value="2">Trimester 2 (13-27 minggu)</option>
                    <option value="3">Trimester 3 (28+ minggu)</option>
                </select>
            </div>
            <div class="col-md-2">
                <button class="btn btn-outline-secondary btn-custom w-100" id="clearFilters">
                    <i class="fas fa-times mr-1"></i>
                    Reset
                </button>
            </div>
        </div>
    </div>

    <div class="table-container">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama Ibu</th>
                        <th>Usia Kehamilan</th>
                        <th>Trimester</th>
                        <th>Risiko</th>
                        <th>Status</th>
                        <th>Posyandu</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody id="ibuHamilTableBody">

                </tbody>
            </table>
        </div>

        <div class="empty-state" id="emptyState" style="display: none;">
            <i class="fas fa-baby"></i>
            <h4>Tidak ada data ibu hamil</h4>
            <p>Belum ada data ibu hamil yang tersedia.</p>
        </div>
    </div>

    <div class="pagination-wrapper">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="d-flex align-items-center gap-2">
                <label class="mb-0 text-muted small">Data per halaman:</label>
                <select class="form-select form-select-sm" id="pageSizeSelector" style="width: auto; min-width: 80px;">
                    <option value="10" selected>10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>
            <div id="resultsCount" class="text-muted small"></div>
        </div>
        <nav aria-label="Ibu hamil pagination">
            <ul class="pagination justify-content-center" id="pagination">

            </ul>
        </nav>
    </div>
</div>

<div class="modal fade" id="deleteModal" 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>Apakah Anda yakin ingin menghapus data ibu hamil ini?</p>
                <p class="text-muted">Tindakan ini tidak dapat dibatalkan.</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="confirmDelete">
                    <i class="fas fa-trash mr-1"></i>
                    Hapus
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>$(document).ready(function() {

    let currentPage = 1;
    let pageSize = 10;
    let currentFilters = {
        search: '',
        posyandu: '',
        trimester: ''
    };
    let deleteId = null;

    init();

    function init() {
        loadIbuHamilData();
        loadPosyanduOptions();
        bindEvents();
    }

    function bindEvents() {

        $('#searchInput').on('input', debounce(function() {
            currentFilters.search = $(this).val();
            currentPage = 1;
            loadIbuHamilData();
        }, 300));

        $('#posyanduFilter, #trimesterFilter').on('change', function() {
            currentFilters.posyandu = $('#posyanduFilter').val();
            currentFilters.trimester = $('#trimesterFilter').val();
            currentPage = 1;
            loadIbuHamilData();
        });

        $('#clearFilters').on('click', function() {
            $('#searchInput').val('');
            $('#posyanduFilter').val('');
            $('#trimesterFilter').val('');

            currentFilters = {
                search: '',
                posyandu: '',
                trimester: ''
            };
            currentPage = 1;
            loadIbuHamilData();
        });

        $('#confirmDelete').on('click', function() {
            if (deleteId) {
                deleteIbuHamil(deleteId);
            }
        });

        $('#pageSizeSelector').on('change', function() {
            pageSize = parseInt($(this).val());
            currentPage = 1;
            loadIbuHamilData();
        });
    }

    function loadIbuHamilData() {
        $.ajax({
            url: '{% url "admin_panel:posyandu:api_ibu_hamil_list" %}',
            method: 'GET',
            data: {
                page: currentPage,
                page_size: pageSize,
                search: currentFilters.search,
                posyandu: currentFilters.posyandu,
                trimester: currentFilters.trimester
            },
            success: function(response) {
                console.log('API Response:', response);
                displayIbuHamilData(response.results || [], response.pagination || {});
                updateStatistics(response.statistics || {});
                updatePagination(response.pagination || {});
                updateResultsCount(response.pagination || {});
            },
            error: function(xhr, status, error) {
                console.error('Error loading ibu hamil data:', error);
                showAlert('Error loading data', 'error');
            }
        });
    }

    function displayIbuHamilData(data, pagination) {
        const tbody = $('#ibuHamilTableBody');
        const emptyState = $('#emptyState');

        if (!data || data.length === 0) {
            tbody.html('');
            emptyState.show();
            return;
        }

        emptyState.hide();

        let html = '';
        data.forEach(function(ibu, index) {
            const rowNumber = ((pagination.current_page || currentPage) - 1) * (pagination.page_size || pageSize) + index + 1;
            const validAge = Math.min(ibu.usia_kehamilan || 0, 42);
            const trimester = getTrimester(validAge);
            const trimesterClass = `trimester-${trimester}`;
            const riskClass = ibu.risiko_kehamilan === 'tinggi' ? 'high' : 'low';
            const statusClass = ibu.status_aktif ? 'active' : 'inactive';
            const statusText = ibu.status_aktif ? 'Aktif' : 'Tidak Aktif';

            html += `
                <tr>
                    <td>${rowNumber}</td>
                    <td>
                        <div class="d-flex flex-column">
                            <strong>${ibu.penduduk_name || '-'}</strong>
                            <small class="text-muted">NIK: ${ibu.penduduk_nik || '-'}</small>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex flex-column">
                            <span class="font-weight-bold">${validAge} minggu</span>
                            <small class="text-muted">HPHT: ${ibu.tanggal_hpht || '-'}</small>
                        </div>
                    </td>
                    <td><span class="pregnancy-badge ${trimesterClass}">Trimester ${trimester}</span></td>
                    <td><span class="risk-badge ${riskClass}">${ibu.risiko_kehamilan === 'tinggi' ? 'Tinggi' : 'Rendah'}</span></td>
                    <td><span class="status-badge ${statusClass}">${statusText}</span></td>
                    <td>${ibu.posyandu_name || '-'}</td>
                    <td>
                        <div class="action-buttons">
                            <a href="/admin-panel/posyandu/ibu-hamil/${ibu.id}/" class="btn btn-sm btn-outline-primary" title="Lihat Detail">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="/admin-panel/posyandu/ibu-hamil/${ibu.id}/edit/" class="btn btn-sm btn-outline-warning" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <button class="btn btn-sm btn-outline-danger" onclick="confirmDelete(${ibu.id})" title="Hapus">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            `;
        });

        tbody.html(html);
    }

    function loadPosyanduOptions() {
        $.ajax({
            url: '{% url "admin_panel:posyandu:api_location_list" %}',
            method: 'GET',
            success: function(response) {
                let options = '<option value="">Semua Posyandu</option>';
                if (response.data) {
                    response.data.forEach(function(location) {
                        options += `<option value="${location.id}">${location.name}</option>`;
                    });
                }
                $('#posyanduFilter').html(options);
            },
            error: function(xhr, status, error) {
                console.error('Error loading posyandu options:', error);
            }
        });
    }

    function getTrimester(weeks) {
        if (weeks <= 12) return 1;
        if (weeks <= 27) return 2;
        return 3;
    }

    function updateStatistics(stats) {
        if (!stats) {
            $('#totalIbuHamil').text(0);
            $('#trimester1').text(0);
            $('#trimester2').text(0);
            $('#trimester3').text(0);
            return;
        }

        $('#totalIbuHamil').text(stats.total || 0);
        $('#trimester1').text(stats.trimester1 || 0);
        $('#trimester2').text(stats.trimester2 || 0);
        $('#trimester3').text(stats.trimester3 || 0);
    }

    function updatePagination(pagination) {
        const container = $('#pagination');
        
        if (!pagination || pagination.total_pages <= 1) {
            container.html('');
            return;
        }

        let html = '';
        const currentPageNum = pagination.current_page;
        const totalPages = pagination.total_pages;
        const isMobile = window.innerWidth < 768;
        const isExtraSmall = window.innerWidth < 576;
        
        // Mobile: hanya tampilkan 3 pages (prev, current, next) atau 2 pages untuk extra small
        const maxVisiblePages = isExtraSmall ? 2 : (isMobile ? 3 : 5);

        // Previous button
        html += `
            <li class="page-item ${!pagination.has_previous ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="goToPage(${currentPageNum - 1}); return false;">
                    <i class="fas fa-chevron-left"></i>
                </a>
            </li>
        `;

        if (isMobile) {
            // Mobile: Simplified pagination - hanya current page number
            html += `
                <li class="page-item active">
                    <span class="page-link">${currentPageNum} / ${totalPages}</span>
                </li>
            `;
        } else {
            // Desktop: Full pagination
            let startPage = Math.max(1, currentPageNum - Math.floor(maxVisiblePages / 2));
            let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
            
            if (endPage - startPage + 1 < maxVisiblePages) {
                startPage = Math.max(1, endPage - maxVisiblePages + 1);
            }

            // First page
            if (startPage > 1) {
                html += `
                    <li class="page-item">
                        <a class="page-link" href="#" onclick="goToPage(1); return false;">1</a>
                    </li>
                `;
                if (startPage > 2) {
                    html += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                }
            }

            // Page numbers
            for (let i = startPage; i <= endPage; i++) {
                html += `
                    <li class="page-item ${i === currentPageNum ? 'active' : ''}">
                        <a class="page-link" href="#" onclick="goToPage(${i}); return false;">${i}</a>
                    </li>
                `;
            }

            // Last page
            if (endPage < totalPages) {
                if (endPage < totalPages - 1) {
                    html += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                }
                html += `
                    <li class="page-item">
                        <a class="page-link" href="#" onclick="goToPage(${totalPages}); return false;">${totalPages}</a>
                    </li>
                `;
            }
        }

        // Next button
        html += `
            <li class="page-item ${!pagination.has_next ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="goToPage(${currentPageNum + 1}); return false;">
                    <i class="fas fa-chevron-right"></i>
                </a>
            </li>
        `;

        container.html(html);
    }

    function updateResultsCount(pagination) {
        if (!pagination || !pagination.total_items) {
            $('#resultsCount').html('');
            return;
        }

        const start = ((pagination.current_page - 1) * pagination.page_size) + 1;
        const end = Math.min(pagination.current_page * pagination.page_size, pagination.total_items);
        
        $('#resultsCount').html(`Menampilkan ${start}-${end} dari ${pagination.total_items} data`);
    }

    window.goToPage = function(page) {
        currentPage = page;
        loadIbuHamilData();
    };

    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    window.confirmDelete = function(id) {
        deleteId = id;
        $('#deleteModal').modal('show');
    };

    function deleteIbuHamil(id) {
        $.ajax({
            url: `/admin-panel/posyandu/api/ibu-hamil-delete/${id}/`,
            method: 'DELETE',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(response) {
                showAlert('Data ibu hamil berhasil dihapus', 'success');
                $('#deleteModal').modal('hide');
                loadIbuHamilData();
            },
            error: function(xhr, status, error) {
                showAlert('Error deleting ibu hamil data', 'error');
            }
        });
    }

    function showAlert(message, type) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
        
        const alertHtml = `
            <div class="alert ${alertClass} custom-alert alert-dismissible fade show" role="alert">
                <i class="fas ${iconClass} mr-2"></i>
                ${message}
                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
            </div>
        `;
        
        $('body').append(alertHtml);
        
        setTimeout(function() {
            $('.custom-alert').alert('close');
        }, 3000);
    }
});
</script>
{% endblock %}