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

{% block page_title %}Form Rekam Kesehatan{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/posyandu/posyandu_form.css' %}">
<style>
    /* Patient Search Container */
    .patient-search {
        position: relative;
    }

    .patient-search .search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #dee2e6;
        border-top: none;
        border-radius: 0 0 8px 8px;
        max-height: 300px;
        overflow-y: auto;
        z-index: 9999;
        display: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        margin-top: -1px;
    }
    
    .search-result-item {
        padding: 12px 15px;
        cursor: pointer;
        border-bottom: 1px solid #f8f9fa;
        transition: background-color 0.2s ease;
    }
    
    .search-result-item:hover {
        background: #f8f9fa;
    }
    
    .search-result-item:last-child {
        border-bottom: none;
    }
    .patient-info {
        background: #e3f2fd;
        border-radius: 8px;
        padding: 15px;
        margin-top: 15px;
        display: none;
    }
    .patient-info.show {
        display: block;
    }
    .form-navigation {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 20px;
        border-top: 1px solid #dee2e6;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
    .required-field::after {
        content: " *";
        color: #dc3545;
    }
    .form-help {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 5px;
    }
    .validation-error {
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 5px;
    }
    .auto-calculate {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 5px;
        padding: 10px;
        margin-top: 10px;
        font-size: 0.875rem;
    }
    .bmi-calculator {
        background: #d1ecf1;
        border: 1px solid #bee5eb;
        border-radius: 5px;
        padding: 15px;
        margin-top: 15px;
    }
    .bmi-value {
        font-size: 1.5rem;
        font-weight: bold;
        color: #0c5460;
    }
    .bmi-category {
        font-size: 0.875rem;
        color: #0c5460;
    }
    .print-preview {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
        display: none;
    }
    .print-preview.show {
        display: block;
    }
    @media print {
        .form-navigation, .step-indicator {
            display: none !important;
        }
        .form-section {
            box-shadow: none !important;
            border: 1px solid #dee2e6 !important;
        }
    }
</style>
{% endblock %}

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

    <div class="form-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:health_records' %}" 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-heartbeat mr-3"></i>
                        Form Rekam Kesehatan
                    </h2>
                </div>
                <p class="mb-0 opacity-75">Isi data rekam kesehatan penduduk dengan lengkap</p>
            </div>
            <div class="col-md-4 text-right">
                <button class="btn btn-light" onclick="printForm()">
                    <i class="fas fa-print mr-2"></i>
                    Cetak Form
                </button>
            </div>
        </div>
    </div>

    <div class="step-indicator">
        <div class="step active" data-step="1">
            <div class="step-number">1</div>
            <div class="step-label">Informasi Penduduk</div>
        </div>
        <div class="step" data-step="2">
            <div class="step-number">2</div>
            <div class="step-label">Tanda Vital</div>
        </div>
        <div class="step" data-step="3">
            <div class="step-number">3</div>
            <div class="step-label">Informasi Medis</div>
        </div>
        <div class="step" data-step="4">
            <div class="step-number">4</div>
            <div class="step-label">Review & Simpan</div>
        </div>
    </div>

    <form id="healthRecordForm">

        <div class="form-step active" id="step1">
            <div class="form-section">
                <h5 class="section-title">
                    <i class="fas fa-user mr-2"></i>
                    Informasi Penduduk
                </h5>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="patientSearch" class="required-field">Cari Penduduk</label>
                            <div class="patient-search">
                                <input type="text" class="form-control" id="patientSearch" placeholder="Ketik nama atau NIK penduduk...">
                                <div class="search-results" id="patientSearchResults"></div>
                            </div>
                            <div class="form-help">Mulai ketik nama atau NIK untuk mencari penduduk</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="posyanduSelect" class="required-field">Posyandu</label>
                            <select class="form-control" id="posyanduSelect" required>
                                <option value="">Pilih Posyandu</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="patient-info" id="selectedPatientInfo">
                    <div class="row">
                        <div class="col-md-3">
                            <strong>Nama:</strong> <span id="patientName">-</span>
                        </div>
                        <div class="col-md-3">
                            <strong>NIK:</strong> <span id="patientNik">-</span>
                        </div>
                        <div class="col-md-3">
                            <strong>Tanggal Lahir:</strong> <span id="patientBirthDate">-</span>
                        </div>
                        <div class="col-md-3">
                            <strong>Jenis Kelamin:</strong> <span id="patientGender">-</span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="patientType" class="required-field">Jenis Pasien</label>
                            <div class="input-group">
                                <select class="form-control" id="patientType" required>
                                    <option value="">Pilih Jenis Pasien</option>
                                </select>
                                <div class="input-group-append">
                                    <a href="{% url 'admin_panel:posyandu:patient_types' %}" class="btn btn-outline-primary" target="_blank">
                                        <i class="fas fa-cog"></i> Kelola
                                    </a>
                                </div>
                            </div>
                            <div class="form-help">
                                <a href="{% url 'admin_panel:posyandu:patient_type_create' %}" target="_blank" class="text-primary">
                                    <i class="fas fa-plus mr-1"></i>
                                    Tambah jenis pasien baru
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="visitDate" class="required-field">Tanggal Kunjungan</label>
                            <input type="date" class="form-control" id="visitDate" required>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-step" id="step2">
            <div class="form-section">
                <h5 class="section-title">
                    <i class="fas fa-heartbeat mr-2"></i>
                    Tanda Vital
                </h5>

                <div class="vital-signs-grid">
                    <div class="vital-sign-card" data-field="weight">
                        <div class="vital-sign-label">Berat Badan (kg)</div>
                        <input type="number" class="vital-sign-input" id="weight" step="0.1" min="0" placeholder="0.0">
                        <div class="form-help">Masukkan berat badan dalam kg</div>
                    </div>
                    <div class="vital-sign-card" data-field="height">
                        <div class="vital-sign-label">Tinggi Badan (cm)</div>
                        <input type="number" class="vital-sign-input" id="height" step="0.1" min="0" placeholder="0.0">
                        <div class="form-help">Masukkan tinggi badan dalam cm</div>
                    </div>
                    <div class="vital-sign-card" data-field="bloodPressure">
                        <div class="vital-sign-label">Tekanan Darah</div>
                        <input type="text" class="vital-sign-input" id="bloodPressure" placeholder="120/80">
                        <div class="form-help">Format: sistolik/diastolik</div>
                    </div>
                    <div class="vital-sign-card" data-field="temperature">
                        <div class="vital-sign-label">Suhu (°C)</div>
                        <input type="number" class="vital-sign-input" id="temperature" step="0.1" min="0" placeholder="36.5">
                        <div class="form-help">Suhu tubuh normal: 36-37°C</div>
                    </div>
                </div>

                <div class="bmi-calculator" id="bmiCalculator" style="display: none;">
                    <h6 class="mb-2">
                        <i class="fas fa-calculator mr-2"></i>
                        Kalkulator BMI
                    </h6>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="bmi-value" id="bmiValue">-</div>
                            <div class="bmi-category" id="bmiCategory">-</div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-help">
                                <strong>Kategori BMI:</strong><br>
                                < 18.5: Kurang berat badan<br>
                                18.5-24.9: Normal<br>
                                25-29.9: Kelebihan berat badan<br>
                                ≥ 30: Obesitas
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-step" id="step3">
            <div class="form-section">
                <h5 class="section-title">
                    <i class="fas fa-stethoscope mr-2"></i>
                    Informasi Medis
                </h5>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="complaints">Keluhan</label>
                            <textarea class="form-control" id="complaints" rows="4" placeholder="Tuliskan keluhan yang disampaikan pasien..."></textarea>
                            <div class="form-help">Jelaskan keluhan utama dan gejala yang dirasakan</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="diagnosis">Diagnosis</label>
                            <textarea class="form-control" id="diagnosis" rows="4" placeholder="Tuliskan diagnosis berdasarkan pemeriksaan..."></textarea>
                            <div class="form-help">Diagnosis sementara atau definitif</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="treatment">Pengobatan</label>
                            <textarea class="form-control" id="treatment" rows="4" placeholder="Tuliskan resep obat atau pengobatan yang diberikan..."></textarea>
                            <div class="form-help">Resep obat, dosis, dan cara penggunaan</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="nextVisit">Kunjungan Berikutnya</label>
                            <input type="date" class="form-control" id="nextVisit">
                            <div class="form-help">Jadwalkan kunjungan kontrol jika diperlukan</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="notes">Catatan Tambahan</label>
                            <textarea class="form-control" id="notes" rows="3" placeholder="Catatan tambahan atau instruksi khusus..."></textarea>
                            <div class="form-help">Informasi tambahan yang perlu dicatat</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-step" id="step4">
            <div class="form-section">
                <h5 class="section-title">
                    <i class="fas fa-check-circle mr-2"></i>
                    Review Data
                </h5>

                <div class="row">
                    <div class="col-md-6">
                        <h6>Informasi Penduduk</h6>
                        <div class="review-item">
                            <strong>Nama:</strong> <span id="reviewPatientName">-</span>
                        </div>
                        <div class="review-item">
                            <strong>Jenis Pasien:</strong> <span id="reviewPatientType">-</span>
                        </div>
                        <div class="review-item">
                            <strong>Tanggal Kunjungan:</strong> <span id="reviewVisitDate">-</span>
                        </div>
                        <div class="review-item">
                            <strong>Posyandu:</strong> <span id="reviewPosyandu">-</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6>Tanda Vital</h6>
                        <div class="review-item">
                            <strong>Berat Badan:</strong> <span id="reviewWeight">-</span> kg
                        </div>
                        <div class="review-item">
                            <strong>Tinggi Badan:</strong> <span id="reviewHeight">-</span> cm
                        </div>
                        <div class="review-item">
                            <strong>Tekanan Darah:</strong> <span id="reviewBloodPressure">-</span>
                        </div>
                        <div class="review-item">
                            <strong>Suhu:</strong> <span id="reviewTemperature">-</span> °C
                        </div>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-6">
                        <h6>Keluhan</h6>
                        <div class="review-content" id="reviewComplaints">-</div>
                    </div>
                    <div class="col-md-6">
                        <h6>Diagnosis</h6>
                        <div class="review-content" id="reviewDiagnosis">-</div>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-6">
                        <h6>Pengobatan</h6>
                        <div class="review-content" id="reviewTreatment">-</div>
                    </div>
                    <div class="col-md-6">
                        <h6>Kunjungan Berikutnya</h6>
                        <div class="review-content" id="reviewNextVisit">-</div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div class="form-navigation">
        <div class="row">
            <div class="col-md-6">
                <button type="button" class="btn btn-outline-secondary" id="prevStep" style="display: none;">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Sebelumnya
                </button>
            </div>
            <div class="col-md-6 text-right">
                <button type="button" class="btn btn-primary" id="nextStep">
                    Selanjutnya
                    <i class="fas fa-arrow-right ml-2"></i>
                </button>
                <button type="button" class="btn btn-success" id="saveForm" style="display: none;">
                    <i class="fas fa-save mr-2"></i>
                    Simpan Rekam
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="printPreviewModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-print mr-2"></i>
                    Preview Cetak
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="printPreviewContent">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-primary" onclick="printForm()">
                    <i class="fas fa-print mr-2"></i>
                    Cetak
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>$(document).ready(function() {
    let currentStep = 1;
    let selectedPatient = null;
    let formData = {};

    loadPosyanduOptions();
    loadPatientTypes();
    setCurrentDate();

    $('#nextStep').on('click', function() {
        if (validateCurrentStep()) {
            if (currentStep < 4) {
                goToStep(currentStep + 1);
            }
        }
    });

    $('#prevStep').on('click', function() {
        if (currentStep > 1) {
            goToStep(currentStep - 1);
        }
    });

    $('#saveForm').on('click', function() {

        if ($(this).prop('disabled')) {
            return;
        }
        if (validateCurrentStep()) {
            $(this).prop('disabled', true);
            saveHealthRecord();
        }
    });

    $('#patientSearch').on('input', function() {
        const query = $(this).val();
        if (query.length >= 2) {
            searchPatients(query);
        } else {
            $('#patientSearchResults').hide();
        }
    });

    $('#weight, #height').on('input', function() {
        calculateBMI();
    });

    $('.vital-sign-card').on('click', function() {
        $(this).addClass('focused');
        $(this).find('input').focus();
    });

    $('.vital-sign-input').on('blur', function() {
        $(this).closest('.vital-sign-card').removeClass('focused');
    });

    function goToStep(step) {

        $(`.form-step`).removeClass('active');
        $(`#step${currentStep}`).removeClass('active');

        currentStep = step;
        $(`#step${currentStep}`).addClass('active');

        $('.step').removeClass('active completed');
        for (let i = 1; i <= currentStep; i++) {
            if (i < currentStep) {
                $(`.step[data-step="${i}"]`).addClass('completed');
            } else {
                $(`.step[data-step="${i}"]`).addClass('active');
            }
        }

        updateNavigationButtons();

        if (currentStep === 4) {
            updateReviewData();
        }
    }

    function updateNavigationButtons() {
        if (currentStep === 1) {
            $('#prevStep').hide();
        } else {
            $('#prevStep').show();
        }

        if (currentStep === 4) {
            $('#nextStep').hide();
            $('#saveForm').show();
        } else {
            $('#nextStep').show();
            $('#saveForm').hide();
        }
    }

    function validateCurrentStep() {
        let isValid = true;

        if (currentStep === 1) {
            if (!selectedPatient) {
                showAlert('Pilih penduduk terlebih dahulu', 'warning');
                isValid = false;
            }
            if (!$('#posyanduSelect').val()) {
                showAlert('Pilih posyandu terlebih dahulu', 'warning');
                isValid = false;
            }
            if (!$('#patientType').val()) {
                showAlert('Pilih jenis pasien terlebih dahulu', 'warning');
                isValid = false;
            }
            if (!$('#visitDate').val()) {
                showAlert('Isi tanggal kunjungan terlebih dahulu', 'warning');
                isValid = false;
            }
        }

        return isValid;
    }

    function searchPatients(query) {
        console.log('Searching penduduk with query:', query);
        $.ajax({
            url: '{% url "admin_panel:posyandu:api_penduduk_search" %}',
            method: 'GET',
            data: { q: query },
            success: function(response) {
                console.log('Search response:', response);
                if (response.success) {
                    displaySearchResults(response.results || []);
                } else {
                    console.error('Search failed:', response.error);
                    alert('Pencarian gagal: ' + (response.error || 'Unknown error'));
                }
            },
            error: function(xhr, status, error) {
                console.error('Error searching penduduk:', error);
                console.error('XHR:', xhr);
                console.error('Status:', status);
                console.error('Response Text:', xhr.responseText);
                alert('Error mencari penduduk. Silakan cek console untuk detail.');
            }
        });
    }

    let currentSearchResults = [];

    function displaySearchResults(penduduk_list) {
        currentSearchResults = penduduk_list;
        const container = $('#patientSearchResults');

        if (!penduduk_list || penduduk_list.length === 0) {
            container.html('<div class="search-result-item">Tidak ada penduduk ditemukan</div>');
        } else {
            let html = '';
            penduduk_list.forEach(function(penduduk, index) {
                const name = penduduk.name || 'N/A';
                const nik = penduduk.nik || '-';
                const gender = penduduk.gender_display || penduduk.gender || '-';
                const address = penduduk.address || penduduk.full_address || '-';
                const age = penduduk.age ? `${penduduk.age} tahun` : '-';
                
                html += `
                    <div class="search-result-item" data-patient-index="${index}">
                        <div class="font-weight-bold">${name}</div>
                        <small class="text-muted">NIK: ${nik} | ${gender} | ${age} | ${address}</small>
                    </div>
                `;
            });
            container.html(html);
        }

        container.show();

        $('.search-result-item').on('click', function() {
            const patientIndex = $(this).data('patient-index');
            if (patientIndex !== undefined) {
                const pendudukData = currentSearchResults[patientIndex];
                selectPatient(pendudukData);
            }
        });
    }

    function selectPatient(penduduk) {
        selectedPatient = penduduk;
        $('#patientSearch').val(penduduk.name || 'N/A');
        $('#patientSearchResults').hide();

        $('#patientName').text(penduduk.name || 'N/A');
        $('#patientNik').text(penduduk.nik || '-');
        $('#patientBirthDate').text(penduduk.birth_date || '-');
        $('#patientGender').text(penduduk.gender_display || penduduk.gender || '-');
        $('#selectedPatientInfo').addClass('show');
    }

    function loadPosyanduOptions() {
        $.ajax({
            url: '{% url "posyandu:api_location_list" %}',
            method: 'GET',
            success: function(response) {
                let options = '<option value="">Pilih Posyandu</option>';
                if (response.results && Array.isArray(response.results)) {
                    response.results.forEach(function(location) {
                        options += `<option value="${location.id}">${location.name}</option>`;
                    });
                } else {
                    console.warn('Invalid response format:', response);
                }
                $('#posyanduSelect').html(options);
            }
        });
    }

    function loadPatientTypes() {
        $.ajax({
            url: '{% url "posyandu:api_patient_types" %}',
            method: 'GET',
            success: function(response) {
                let options = '<option value="">Pilih Jenis Pasien</option>';
                if (response.data && Array.isArray(response.data)) {
                    response.data.forEach(function(patientType) {
                        options += `<option value="${patientType.code}">${patientType.name}</option>`;
                    });
                } else {
                    console.warn('Invalid patient types response format:', response);
                }
                $('#patientType').html(options);
            },
            error: function(xhr, status, error) {
                console.error('Error loading patient types:', error);
            }
        });
    }

    $('#patientType').on('focus', function() {
        loadPatientTypes();
    });

    function setCurrentDate() {
        const today = new Date().toISOString().split('T')[0];
        $('#visitDate').val(today);
    }

    function calculateBMI() {
        const weight = parseFloat($('#weight').val());
        const height = parseFloat($('#height').val());

        if (weight && height && height > 0) {
            const bmi = weight / Math.pow(height / 100, 2);
            const bmiRounded = bmi.toFixed(1);

            $('#bmiValue').text(bmiRounded);

            let category = '';
            if (bmi < 18.5) category = 'Kurang berat badan';
            else if (bmi < 25) category = 'Normal';
            else if (bmi < 30) category = 'Kelebihan berat badan';
            else category = 'Obesitas';

            $('#bmiCategory').text(category);
            $('#bmiCalculator').show();
        } else {
            $('#bmiCalculator').hide();
        }
    }

    function updateReviewData() {
        $('#reviewPatientName').text(selectedPatient ? selectedPatient.name : '-');
        $('#reviewPatientType').text($('#patientType option:selected').text());
        $('#reviewVisitDate').text($('#visitDate').val());
        $('#reviewPosyandu').text($('#posyanduSelect option:selected').text());
        $('#reviewWeight').text($('#weight').val() || '-');
        $('#reviewHeight').text($('#height').val() || '-');
        $('#reviewBloodPressure').text($('#bloodPressure').val() || '-');
        $('#reviewTemperature').text($('#temperature').val() || '-');
        $('#reviewComplaints').text($('#complaints').val() || '-');
        $('#reviewDiagnosis').text($('#diagnosis').val() || '-');
        $('#reviewTreatment').text($('#treatment').val() || '-');
        $('#reviewNextVisit').text($('#nextVisit').val() || '-');
    }

    function saveHealthRecord() {
        // Validate required fields before sending
        if (!selectedPatient) {
            showAlert('Pilih penduduk terlebih dahulu', 'warning');
            return;
        }
        if (!$('#posyanduSelect').val()) {
            showAlert('Pilih posyandu terlebih dahulu', 'warning');
            return;
        }
        if (!$('#patientType').val()) {
            showAlert('Pilih jenis pasien terlebih dahulu', 'warning');
            return;
        }
        if (!$('#visitDate').val()) {
            showAlert('Isi tanggal kunjungan terlebih dahulu', 'warning');
            return;
        }

        const formData = {
            patient_id: selectedPatient.id,  // API expects patient_id
            posyandu_id: $('#posyanduSelect').val(),
            patient_type: $('#patientType').val(),
            visit_date: $('#visitDate').val(),
            weight: $('#weight').val(),
            height: $('#height').val(),
            blood_pressure: $('#bloodPressure').val(),
            temperature: $('#temperature').val(),
            complaints: $('#complaints').val(),
            diagnosis: $('#diagnosis').val(),
            treatment: $('#treatment').val(),
            next_visit: $('#nextVisit').val(),
            notes: $('#notes').val()
        };

        $.ajax({
            url: '{% url "posyandu:api_health_record_create" %}',
            method: 'POST',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val(),
                'Content-Type': 'application/json'
            },
            data: JSON.stringify(formData),
            success: function(response) {
                showAlert('Rekam kesehatan berhasil disimpan', 'success');
                setTimeout(function() {
                    window.location.href = '{% url "posyandu:health_records" %}';
                }, 1500);
            },
            error: function(xhr, status, error) {
                console.error('Error saving health record:', error);
                console.error('XHR:', xhr);
                console.error('Status:', status);
                console.error('Response Text:', xhr.responseText);
                
                let errorMessage = 'Error saving health record';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMessage = xhr.responseJSON.error;
                } else if (xhr.responseText) {
                    try {
                        const response = JSON.parse(xhr.responseText);
                        errorMessage = response.error || errorMessage;
                    } catch (e) {
                        errorMessage = xhr.responseText;
                    }
                }
                
                showAlert(errorMessage, 'error');
                $('#saveForm').prop('disabled', false);
            }
        });
    }

    window.printForm = function() {
        updateReviewData();
        generatePrintPreview();
        $('#printPreviewModal').modal('show');
    };

    function generatePrintPreview() {
        const printContent = `
            <div class="print-preview show">
                <div class="text-center mb-4">
                    <h3>REKAM KESEHATAN</h3>
                    <h5>Posyandu ${$('#posyanduSelect option:selected').text()}</h5>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <h6>Informasi Penduduk</h6>
                        <p><strong>Nama:</strong> ${selectedPatient ? selectedPatient.name : '-'}</p>
                        <p><strong>NIK:</strong> ${selectedPatient ? selectedPatient.nik : '-'}</p>
                        <p><strong>Jenis Pasien:</strong> ${$('#patientType option:selected').text()}</p>
                        <p><strong>Tanggal Kunjungan:</strong> ${$('#visitDate').val()}</p>
                    </div>
                    <div class="col-md-6">
                        <h6>Tanda Vital</h6>
                        <p><strong>Berat Badan:</strong> ${$('#weight').val() || '-'} kg</p>
                        <p><strong>Tinggi Badan:</strong> ${$('#height').val() || '-'} cm</p>
                        <p><strong>Tekanan Darah:</strong> ${$('#bloodPressure').val() || '-'}</p>
                        <p><strong>Suhu:</strong> ${$('#temperature').val() || '-'} °C</p>
                    </div>
                </div>

                <div class="mt-4">
                    <h6>Keluhan</h6>
                    <p>${$('#complaints').val() || '-'}</p>

                    <h6>Diagnosis</h6>
                    <p>${$('#diagnosis').val() || '-'}</p>

                    <h6>Pengobatan</h6>
                    <p>${$('#treatment').val() || '-'}</p>

                    <h6>Kunjungan Berikutnya</h6>
                    <p>${$('#nextVisit').val() || '-'}</p>
                </div>

                <div class="mt-4 text-right">
                    <p>Dokter/Petugas: _________________</p>
                    <p>Tanggal: ${new Date().toLocaleDateString('id-ID')}</p>
                </div>
            </div>
        `;

        $('#printPreviewContent').html(printContent);
    }

    $(document).on('click', function(e) {
        if (!$(e.target).closest('.patient-search').length) {
            $('#patientSearchResults').hide();
        }
    });
});
</script>
{% endblock %}