{% extends "base.html" %}

{% block content %}
<div style="padding: 30px;">
    <h1>💊 Prescription Management</h1>
    
    <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 30px;">
        <h2 style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee;">Patient Search</h2>
        
        <div style="display: flex; gap: 10px; margin-bottom: 20px;">
            <input type="text" id="search-term" placeholder="🔍 Search Patient (Name/MR/CNIC/Mobile)" 
                   style="flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
            <button onclick="searchPatient()" class="btn btn-accent" style="padding: 10px 20px;">Search</button>
        </div>
        
        <div id="patient-info" style="padding: 15px; background: #f8f9fa; border-radius: 5px; margin-bottom: 20px;">
            <p id="patient-label" style="margin: 0; color: #666;">Search and select a patient to create prescription</p>
        </div>
        
        <div id="patient-selection" style="display: none; margin-bottom: 20px;">
            <h3 style="margin-bottom: 15px;">Select Patient:</h3>
            <div id="patients-list" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 5px;">
                <!-- Patient list will be populated here -->
            </div>
            <div style="display: flex; gap: 10px; margin-top: 15px;">
                <button onclick="confirmPatientSelection()" class="btn btn-success" style="flex: 1; padding: 8px;">✅ Select</button>
                <button onclick="cancelPatientSelection()" class="btn btn-danger" style="flex: 1; padding: 8px;">❌ Cancel</button>
            </div>
        </div>
    </div>
    
    <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
        <h2 style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee;">Prescription Details</h2>
        
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px;">
            <!-- Left column -->
            <div>
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Symptoms:</label>
                    <textarea id="symptoms" rows="6" 
                              style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;"></textarea>
                </div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Diagnosis:</label>
                    <textarea id="diagnosis" rows="6" 
                              style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;"></textarea>
                </div>
            </div>
            
            <!-- Right column -->
            <div>
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Medicine:</label>
                    <textarea id="medicine" rows="6" 
                              style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;"></textarea>
                </div>
                
                <div style="margin-bottom: 20px; display: flex; gap: 20px;">
                    <div style="flex: 1;">
                        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Dosage:</label>
                        <input type="text" id="dosage" 
                               style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                    </div>
                    
                    <div style="flex: 1;">
                        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Duration:</label>
                        <input type="text" id="duration" 
                               style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                    </div>
                </div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Advice:</label>
                    <textarea id="advice" rows="4" 
                              style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;"></textarea>
                </div>
            </div>
        </div>
        
        <div style="display: flex; gap: 10px; margin-top: 30px;">
            <button onclick="savePrescription()" class="btn btn-success" style="flex: 1; padding: 12px; font-size: 16px;">
                💾 Save Prescription
            </button>
            <button onclick="printPrescription()" class="btn btn-accent" style="flex: 1; padding: 12px; font-size: 16px;">
                📄 Print Prescription (A4)
            </button>
            <button onclick="clearForm()" class="btn btn-danger" style="flex: 1; padding: 12px; font-size: 16px;">
                🧹 Clear Form
            </button>
        </div>
    </div>
</div>

<script>
let currentPatient = null;
let selectedPatientIndex = null;

function searchPatient() {
    const searchTerm = document.getElementById('search-term').value.trim();
    
    if (!searchTerm) {
        alert('Please enter search term');
        return;
    }
    
    fetch('/prescriptions/search', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `search_term=${searchTerm}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else if (data.patients.length === 0) {
            alert('No patient found matching your search');
            document.getElementById('patient-label').textContent = 'Patient not found';
            currentPatient = null;
        } else if (data.patients.length === 1) {
            // Single match
            currentPatient = data.patients[0];
            const infoText = `👤 ${currentPatient.name} | MR: ${currentPatient.mr_number} | CNIC: ${currentPatient.cnic} | Mobile: ${currentPatient.mobile} | Age: ${currentPatient.age} | Gender: ${currentPatient.gender}`;
            document.getElementById('patient-label').textContent = infoText;
            alert('Patient found and selected!');
        } else {
            // Multiple matches
            showPatientSelection(data.patients);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to search patients');
    });
}

function showPatientSelection(patients) {
    const patientSelection = document.getElementById('patient-selection');
    const patientsList = document.getElementById('patients-list');
    
    // Populate patients list
    let html = '';
    patients.forEach((patient, index) => {
        html += `
            <div class="patient-item" onclick="selectPatientItem(${index})" style="padding: 10px; border-bottom: 1px solid #eee; cursor: pointer;">
                <strong>${patient.name}</strong><br>
                MR: ${patient.mr_number} | CNIC: ${patient.cnic} | Mobile: ${patient.mobile}
            </div>
        `;
    });
    patientsList.innerHTML = html;
    
    // Show selection dialog
    patientSelection.style.display = 'block';
    document.getElementById('patient-info').style.display = 'none';
}

function selectPatientItem(index) {
    // Clear previous selection
    document.querySelectorAll('.patient-item').forEach(item => {
        item.style.backgroundColor = 'white';
    });
    
    // Select new item
    document.querySelectorAll('.patient-item')[index].style.backgroundColor = '#e3f2fd';
    selectedPatientIndex = index;
}

function confirmPatientSelection() {
    if (selectedPatientIndex === null) {
        alert('Please select a patient');
        return;
    }
    
    // Get patients from the list
    const patientsList = document.getElementById('patients-list');
    const patientItems = patientsList.querySelectorAll('.patient-item');
    
    // Get patient data (you would need to store this in a global variable or fetch again)
    // For simplicity, we'll simulate getting the data
    fetch('/prescriptions/search', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `search_term=${document.getElementById('search-term').value}`
    })
    .then(response => response.json())
    .then(data => {
        currentPatient = data.patients[selectedPatientIndex];
        const infoText = `👤 ${currentPatient.name} | MR: ${currentPatient.mr_number} | CNIC: ${currentPatient.cnic} | Mobile: ${currentPatient.mobile} | Age: ${currentPatient.age} | Gender: ${currentPatient.gender}`;
        document.getElementById('patient-label').textContent = infoText;
        
        // Hide selection dialog
        document.getElementById('patient-selection').style.display = 'none';
        document.getElementById('patient-info').style.display = 'block';
        selectedPatientIndex = null;
        
        alert('Patient selected successfully!');
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to select patient');
    });
}

function cancelPatientSelection() {
    document.getElementById('patient-selection').style.display = 'none';
    document.getElementById('patient-info').style.display = 'block';
    selectedPatientIndex = null;
}

function savePrescription() {
    if (!currentPatient) {
        alert('Please search and select a patient first');
        return;
    }
    
    const symptoms = document.getElementById('symptoms').value.trim();
    const diagnosis = document.getElementById('diagnosis').value.trim();
    const medicine = document.getElementById('medicine').value.trim();
    const dosage = document.getElementById('dosage').value.trim();
    const duration = document.getElementById('duration').value.trim();
    const advice = document.getElementById('advice').value.trim();
    
    fetch('/prescriptions/save', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `patient_id=${currentPatient.id}&symptoms=${encodeURIComponent(symptoms)}&diagnosis=${encodeURIComponent(diagnosis)}&medicine=${encodeURIComponent(medicine)}&dosage=${encodeURIComponent(dosage)}&duration=${encodeURIComponent(duration)}&advice=${encodeURIComponent(advice)}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            alert(data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to save prescription');
    });
}

function printPrescription() {
    if (!currentPatient) {
        alert('Please search and select a patient first');
        return;
    }
    
    const symptoms = document.getElementById('symptoms').value.trim();
    const diagnosis = document.getElementById('diagnosis').value.trim();
    const medicine = document.getElementById('medicine').value.trim();
    const dosage = document.getElementById('dosage').value.trim();
    const duration = document.getElementById('duration').value.trim();
    const advice = document.getElementById('advice').value.trim();
    
    fetch('/prescriptions/print', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `patient_id=${currentPatient.id}&symptoms=${encodeURIComponent(symptoms)}&diagnosis=${encodeURIComponent(diagnosis)}&medicine=${encodeURIComponent(medicine)}&dosage=${encodeURIComponent(dosage)}&duration=${encodeURIComponent(duration)}&advice=${encodeURIComponent(advice)}`
    })
    .then(response => {
        if (response.ok) {
            return response.blob();
        } else {
            return response.json().then(data => { throw new Error(data.error); });
        }
    })
    .then(blob => {
        const url = window.URL.createObjectURL(blob);
        window.open(url, '_blank');
    })
    .catch(error => {
        console.error('Error:', error);
        alert(`Failed to generate prescription: ${error.message}`);
    });
}

function clearForm() {
    document.getElementById('search-term').value = '';
    document.getElementById('patient-label').textContent = 'Search and select a patient to create prescription';
    document.getElementById('symptoms').value = '';
    document.getElementById('diagnosis').value = '';
    document.getElementById('medicine').value = '';
    document.getElementById('dosage').value = '';
    document.getElementById('duration').value = '';
    document.getElementById('advice').value = '';
    currentPatient = null;
    selectedPatientIndex = null;
    document.getElementById('patient-selection').style.display = 'none';
    document.getElementById('patient-info').style.display = 'block';
}
</script>
{% endblock %}