{% extends "base.html" %}

{% block content %}
<div style="padding: 30px;">
    <h1>💰 Billing System</h1>
    
    <div class="tabs">
        <button class="tab-button active" onclick="openTab('create-bill')">➕ Create Bill</button>
        <button class="tab-button" onclick="openTab('billing-history')">📜 Billing History</button>
    </div>
    
    <div id="create-bill" class="tab-content" style="display: block;">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;">
            <!-- Left column - Billing information -->
            <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                <h3 style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee;">Billing Information</h3>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Patient:</label>
                    <select id="patient_id" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                        <option value="">Select Patient</option>
                        {% for patient in patients %}
                        <option value="{{ patient[0] }}">{{ patient[1] }} (MR: {{ patient[2] }})</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Doctor:</label>
                    <select id="doctor_id" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                        <option value="">Select Doctor</option>
                        {% for doctor in doctors %}
                        <option value="{{ doctor[0] }}">{{ doctor[1] }} (Fee: ${{ "%.2f"|format(doctor[2]|float) }})</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Consultation Fee:</label>
                    <input type="number" id="consultation_fee" value="0" step="0.01"
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                </div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Discount (%):</label>
                    <input type="number" id="discount" value="0" step="0.01"
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                </div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Tax (%):</label>
                    <input type="number" id="tax" value="0" step="0.01"
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                </div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Payment Method:</label>
                    <select id="payment_method" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                        <option value="Cash">Cash</option>
                        <option value="Credit Card">Credit Card</option>
                        <option value="Debit Card">Debit Card</option>
                        <option value="Insurance">Insurance</option>
                    </select>
                </div>
            </div>
            
            <!-- Right column - Medicine cart and totals -->
            <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                <h3 style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee;">Medicine Cart</h3>
                
                <!-- Medicine selection -->
                <div style="margin-bottom: 20px; display: flex; gap: 10px;">
                    <select id="medicine_id" style="flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                        <option value="">Select Medicine</option>
                        {% for medicine in medicines %}
                        <option value="{{ medicine[0] }}" data-price="{{ medicine[2] }}" data-stock="{{ medicine[3] }}">
                            {{ medicine[1] }} (Price: ${{ "%.2f"|format(medicine[2]|float) }}, Stock: {{ medicine[3] }})
                        </option>
                        {% endfor %}
                    </select>
                    <input type="number" id="quantity" value="1" min="1" style="width: 80px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                    <button onclick="addToCart()" class="btn btn-success" style="padding: 10px 15px;">➕ Add</button>
                </div>
                
                <!-- Cart items -->
                <div style="margin-bottom: 20px;">
                    <h4 style="margin-bottom: 10px;">Cart Items:</h4>
                    <div id="cart-items" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 5px; padding: 10px;">
                        <p id="empty-cart" style="text-align: center; color: #666;">Cart is empty</p>
                        <div id="cart-list"></div>
                    </div>
                    <div style="display: flex; gap: 10px; margin-top: 10px;">
                        <button onclick="removeFromCart()" class="btn btn-danger" style="flex: 1; padding: 8px;">🗑️ Remove Selected</button>
                        <button onclick="clearCart()" class="btn btn-warning" style="flex: 1; padding: 8px;">🧹 Clear Cart</button>
                    </div>
                </div>
                
                <!-- Totals -->
                <div style="background: #f8f9fa; padding: 15px; border-radius: 5px; margin-bottom: 20px;">
                    <h4 style="margin-bottom: 15px;">Bill Summary:</h4>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                        <span>Subtotal:</span>
                        <span id="subtotal">$0.00</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                        <span>Discount:</span>
                        <span id="discount-amount">-$0.00</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                        <span>Tax:</span>
                        <span id="tax-amount">$0.00</span>
                    </div>
                    <hr style="margin: 10px 0;">
                    <div style="display: flex; justify-content: space-between; font-weight: bold; font-size: 18px;">
                        <span>Total Amount:</span>
                        <span id="total-amount" style="color: #27ae60;">$0.00</span>
                    </div>
                </div>
                
                <!-- Action buttons -->
                <div style="display: flex; gap: 10px; margin-top: 20px;">
                    <button onclick="calculateTotals()" class="btn btn-accent" style="flex: 1; padding: 12px;">🧮 Calculate</button>
                    <button onclick="generateBill()" class="btn btn-success" style="flex: 1; padding: 12px;">🧾 Generate Bill</button>
                    <button onclick="printBill()" class="btn btn-warning" style="flex: 1; padding: 12px;">🖨️ Print Bill</button>
                </div>
            </div>
        </div>
    </div>
    
    <div id="billing-history" class="tab-content" style="display: none;">
        <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;">Billing History</h2>
            
            <div style="display: flex; gap: 10px; margin-bottom: 20px;">
                <input type="text" id="search-term" placeholder="🔍 Search by patient name or bill ID" 
                       style="flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                <button onclick="searchBills()" class="btn btn-accent" style="padding: 10px 20px;">Search</button>
                <button onclick="loadBills()" class="btn btn-success" style="padding: 10px 20px;">🔄 Refresh</button>
            </div>
            
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                    <thead>
                        <tr style="background: #f8f9fa; border-bottom: 2px solid #dee2e6;">
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Bill ID</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Patient</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Doctor</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Total Amount</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Status</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Date</th>
                            <th style="padding: 12px; text-align: left;">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="bills-list">
                        {% for bill in bills %}
                        <tr style="border-bottom: 1px solid #dee2e6;">
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ bill[0] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ bill[1] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ bill[2] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">${{ "%.2f"|format(bill[3]|float) }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ bill[4] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ bill[5] }}</td>
                            <td style="padding: 12px;">
                                <div style="display: flex; gap: 5px;">
                                    <a href="/billing/print/{{ bill[0] }}" class="btn btn-sm btn-warning" style="padding: 5px 10px; font-size: 12px; text-decoration: none;">🖨️ Print</a>
                                    <button onclick="deleteBill('{{ bill[0] }}')" class="btn btn-sm btn-danger" style="padding: 5px 10px; font-size: 12px;">🗑️ Delete</button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
.tab-button {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    font-size: 16px;
}

.tab-button.active {
    background: #0056b3;
}

.tab-content {
    background: white;
    padding: 20px;
    border-radius: 0 10px 10px 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

.cart-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.cart-item:hover {
    background: #f8f9fa;
}

.cart-item.selected {
    background: #e3f2fd;
}
</style>

<script>
// Initialize cart from session
let cart = {{ session.get('cart', [])|tojson }};
let selectedCartItem = null;

function openTab(tabName) {
    // Hide all tab contents
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.style.display = 'none';
    });
    
    // Remove active class from all tab buttons
    document.querySelectorAll('.tab-button').forEach(button => {
        button.classList.remove('active');
    });
    
    // Show selected tab and mark button as active
    document.getElementById(tabName).style.display = 'block';
    event.currentTarget.classList.add('active');
    
    // Load bills if opening history tab
    if (tabName === 'billing-history') {
        loadBills();
    }
}

function addToCart() {
    const medicineId = document.getElementById('medicine_id').value;
    const quantity = document.getElementById('quantity').value;
    
    if (!medicineId) {
        alert('Please select a medicine');
        return;
    }
    
    fetch('/billing/add_medicine', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `medicine_id=${medicineId}&quantity=${quantity}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            // Update cart display
            updateCartDisplay();
            calculateTotals();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to add medicine to cart');
    });
}

function updateCartDisplay() {
    const cartList = document.getElementById('cart-list');
    const emptyCart = document.getElementById('empty-cart');
    
    if (cart.length === 0) {
        cartList.innerHTML = '';
        emptyCart.style.display = 'block';
    } else {
        emptyCart.style.display = 'none';
        let html = '';
        cart.forEach((item, index) => {
            html += `
                <div class="cart-item" onclick="selectCartItem(${index})">
                    <div>
                        <strong>${item.medicine_name}</strong><br>
                        Qty: ${item.quantity} × $${item.unit_price.toFixed(2)}
                    </div>
                    <div>$${item.total.toFixed(2)}</div>
                </div>
            `;
        });
        cartList.innerHTML = html;
    }
}

function selectCartItem(index) {
    // Clear previous selection
    document.querySelectorAll('.cart-item').forEach(item => {
        item.classList.remove('selected');
    });
    
    // Select new item
    document.querySelectorAll('.cart-item')[index].classList.add('selected');
    selectedCartItem = index;
}

function removeFromCart() {
    if (selectedCartItem === null) {
        alert('Please select an item to remove');
        return;
    }
    
    const medicineId = cart[selectedCartItem].medicine_id;
    
    fetch('/billing/remove_medicine', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `medicine_id=${medicineId}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            // Update cart display
            selectedCartItem = null;
            updateCartDisplay();
            calculateTotals();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to remove medicine from cart');
    });
}

function clearCart() {
    if (!confirm('Are you sure you want to clear the cart?')) {
        return;
    }
    
    fetch('/billing/clear_cart', {
        method: 'POST'
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            // Update cart display
            selectedCartItem = null;
            updateCartDisplay();
            calculateTotals();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to clear cart');
    });
}

function calculateTotals() {
    const consultationFee = document.getElementById('consultation_fee').value || '0';
    const discount = document.getElementById('discount').value || '0';
    const tax = document.getElementById('tax').value || '0';
    
    fetch('/billing/calculate', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `consultation_fee=${consultationFee}&discount=${discount}&tax=${tax}`
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('subtotal').textContent = `$${data.subtotal.toFixed(2)}`;
        document.getElementById('discount-amount').textContent = `-$${data.discount_amount.toFixed(2)}`;
        document.getElementById('tax-amount').textContent = `$${data.tax_amount.toFixed(2)}`;
        document.getElementById('total-amount').textContent = `$${data.total_amount.toFixed(2)}`;
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to calculate totals');
    });
}

function generateBill() {
    const patientId = document.getElementById('patient_id').value;
    const doctorId = document.getElementById('doctor_id').value;
    const consultationFee = document.getElementById('consultation_fee').value || '0';
    const discount = document.getElementById('discount').value || '0';
    const tax = document.getElementById('tax').value || '0';
    const paymentMethod = document.getElementById('payment_method').value;
    
    if (!patientId || !doctorId) {
        alert('Please select both patient and doctor');
        return;
    }
    
    fetch('/billing/generate', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `patient_id=${patientId}&doctor_id=${doctorId}&consultation_fee=${consultationFee}&discount=${discount}&tax=${tax}&payment_method=${paymentMethod}`
    })
    .then(response => {
        if (response.redirected) {
            window.location.href = response.url;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to generate bill');
    });
}

function printBill() {
    alert('Print bill functionality would be implemented here');
}

function searchBills() {
    const searchTerm = document.getElementById('search-term').value;
    
    fetch('/billing/search', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `search_term=${searchTerm}`
    })
    .then(response => response.json())
    .then(data => {
        const billsList = document.getElementById('bills-list');
        let html = '';
        
        data.bills.forEach(bill => {
            html += `
                <tr style="border-bottom: 1px solid #dee2e6;">
                    <td style="padding: 12px; border-right: 1px solid #dee2e6;">${bill.bill_id}</td>
                    <td style="padding: 12px; border-right: 1px solid #dee2e6;">${bill.patient_name}</td>
                    <td style="padding: 12px; border-right: 1px solid #dee2e6;">${bill.doctor_name}</td>
                    <td style="padding: 12px; border-right: 1px solid #dee2e6;">$${bill.total_amount.toFixed(2)}</td>
                    <td style="padding: 12px; border-right: 1px solid #dee2e6;">${bill.payment_status}</td>
                    <td style="padding: 12px; border-right: 1px solid #dee2e6;">${bill.bill_date}</td>
                    <td style="padding: 12px;">
                        <div style="display: flex; gap: 5px;">
                            <a href="/billing/print/${bill.bill_id}" class="btn btn-sm btn-warning" style="padding: 5px 10px; font-size: 12px; text-decoration: none;">🖨️ Print</a>
                            <button onclick="deleteBill('${bill.bill_id}')" class="btn btn-sm btn-danger" style="padding: 5px 10px; font-size: 12px;">🗑️ Delete</button>
                        </div>
                    </td>
                </tr>
            `;
        });
        
        billsList.innerHTML = html;
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to search bills');
    });
}

function loadBills() {
    fetch('/billing/search', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'search_term='
    })
    .then(response => response.json())
    .then(data => {
        const billsList = document.getElementById('bills-list');
        let html = '';
        
        data.bills.forEach(bill => {
            html += `
                <tr style="border-bottom: 1px solid #dee2e6;">
                    <td style="padding: 12px; border-right: 1px solid #dee2e6;">${bill.bill_id}</td>
                    <td style="padding: 12px; border-right: 1px solid #dee2e6;">${bill.patient_name}</td>
                    <td style="padding: 12px; border-right: 1px solid #dee2e6;">${bill.doctor_name}</td>
                    <td style="padding: 12px; border-right: 1px solid #dee2e6;">$${bill.total_amount.toFixed(2)}</td>
                    <td style="padding: 12px; border-right: 1px solid #dee2e6;">${bill.payment_status}</td>
                    <td style="padding: 12px; border-right: 1px solid #dee2e6;">${bill.bill_date}</td>
                    <td style="padding: 12px;">
                        <div style="display: flex; gap: 5px;">
                            <a href="/billing/print/${bill.bill_id}" class="btn btn-sm btn-warning" style="padding: 5px 10px; font-size: 12px; text-decoration: none;">🖨️ Print</a>
                            <button onclick="deleteBill('${bill.bill_id}')" class="btn btn-sm btn-danger" style="padding: 5px 10px; font-size: 12px;">🗑️ Delete</button>
                        </div>
                    </td>
                </tr>
            `;
        });
        
        billsList.innerHTML = html;
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to load bills');
    });
}

function deleteBill(billId) {
    if (!confirm('Are you sure you want to delete this bill?')) {
        return;
    }
    
    fetch('/billing/delete', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `bill_id=${billId}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            alert('Bill deleted successfully!');
            loadBills();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to delete bill');
    });
}

// Initialize cart display
updateCartDisplay();
</script>
{% endblock %}