<%# Ruby Calculator - Advanced Calculator Interface %>
<%# Author: RSK World (Molla Samser, Founder | Rima Khatun, Designer & Tester) %>
<%# Contact: help@rskworld.in | +91 93305 39277 %>
<%# Website: https://rskworld.in %>
<%# Year: 2026 %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ruby Calculator Pro - Advanced Features</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --theme-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --theme-secondary: #4a5568;
            --theme-accent: #ed8936;
            --theme-success: #48bb78;
            --theme-danger: #e53e3e;
            --theme-warning: #ecc94b;
            --theme-info: #4299e1;
            --theme-background: #f7fafc;
            --theme-text: #2d3748;
            --theme-display: #2d3748;
        }
        
        body {
            background: var(--theme-background);
            color: var(--theme-text);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            transition: all 0.3s ease;
        }
        
        .calculator-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .section-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        
        .section-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }
        
        .section-header {
            background: var(--theme-primary);
            color: white;
            padding: 15px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .btn-calc {
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
            margin: 3px;
        }
        
        .btn-calc:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .result-display {
            background: var(--theme-display);
            color: white;
            border-radius: 10px;
            padding: 20px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            font-size: 1.1em;
            min-height: 60px;
        }
        
        .graph-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin: 15px 0;
            height: 400px;
            position: relative;
        }
        
        .equation-input {
            font-family: 'Courier New', monospace;
            font-size: 1.1em;
            border: 2px solid var(--theme-info);
            border-radius: 8px;
            padding: 12px;
        }
        
        .matrix-input {
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            border: 2px solid var(--theme-accent);
            border-radius: 8px;
            padding: 10px;
            width: 100%;
            min-height: 80px;
        }
        
        .step-display {
            background: #f8f9fa;
            border-left: 4px solid var(--theme-info);
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
        }
        
        .nav-pills .nav-link.active {
            background: var(--theme-primary);
        }
        
        .footer-info {
            background: var(--theme-secondary);
            color: white;
            padding: 25px;
            border-radius: 15px;
            margin-top: 30px;
            text-align: center;
        }
        
        @media (max-width: 768px) {
            .calculator-container {
                padding: 10px;
            }
            
            .section-card {
                padding: 15px;
                margin-bottom: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid calculator-container">
        <!-- Header -->
        <div class="text-center mb-4 animate__animated animate__fadeInDown">
            <h1 class="display-4">
                <i class="fas fa-gem text-danger"></i> Ruby Calculator Pro
            </h1>
            <p class="lead">Advanced Mathematical & Scientific Calculator Suite</p>
        </div>

        <!-- Navigation Tabs -->
        <ul class="nav nav-pills justify-content-center mb-4" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="pill" href="#graphing-tab">
                    <i class="fas fa-chart-line"></i> Graphing
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="pill" href="#equation-tab">
                    <i class="fas fa-square-root-alt"></i> Equations
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="pill" href="#programming-tab">
                    <i class="fas fa-code"></i> Programming
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="pill" href="#financial-tab">
                    <i class="fas fa-dollar-sign"></i> Financial
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="pill" href="#health-tab">
                    <i class="fas fa-heartbeat"></i> Health
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="pill" href="#statistics-tab">
                    <i class="fas fa-chart-bar"></i> Statistics
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="pill" href="#matrix-tab">
                    <i class="fas fa-table"></i> Matrix
                </a>
            </li>
        </ul>

        <!-- Tab Content -->
        <div class="tab-content">
            <!-- Graphing Calculator Tab -->
            <div class="tab-pane fade show active" id="graphing-tab">
                <div class="section-card animate__animated animate__fadeIn">
                    <div class="section-header">
                        <h4><i class="fas fa-chart-line"></i> Graphing Calculator</h4>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Function Equation:</label>
                                <input type="text" class="form-control equation-input" id="graph-equation" 
                                       placeholder="e.g., x^2 + 2*x - 3" value="x^2 - 4">
                            </div>
                            
                            <div class="row">
                                <div class="col-6">
                                    <label class="form-label">X Min:</label>
                                    <input type="number" class="form-control" id="x-min" value="-10">
                                </div>
                                <div class="col-6">
                                    <label class="form-label">X Max:</label>
                                    <input type="number" class="form-control" id="x-max" value="10">
                                </div>
                            </div>
                            
                            <div class="mt-3">
                                <button class="btn btn-primary" onclick="plotFunction()">
                                    <i class="fas fa-chart-line"></i> Plot Function
                                </button>
                                <button class="btn btn-info" onclick="findRoots()">
                                    <i class="fas fa-search"></i> Find Roots
                                </button>
                                <button class="btn btn-warning" onclick="calculateDerivative()">
                                    <i class="fas fa-superscript"></i> Derivative
                                </button>
                                <button class="btn btn-success" onclick="calculateIntegral()">
                                    <i class="fas fa-integral"></i> Integral
                                </button>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="result-display" id="graph-result">
                                Enter an equation and click "Plot Function" to visualize
                            </div>
                        </div>
                    </div>
                    
                    <div class="graph-container">
                        <canvas id="function-chart"></canvas>
                    </div>
                </div>
            </div>

            <!-- Equation Solver Tab -->
            <div class="tab-pane fade" id="equation-tab">
                <div class="section-card animate__animated animate__fadeIn">
                    <div class="section-header">
                        <h4><i class="fas fa-square-root-alt"></i> Equation Solver</h4>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Equation Type:</label>
                                <select class="form-select" id="equation-type">
                                    <option value="linear">Linear (ax + b = c)</option>
                                    <option value="quadratic">Quadratic (ax² + bx + c = 0)</option>
                                    <option value="cubic">Cubic (ax³ + bx² + cx + d = 0)</option>
                                    <option value="system">System of 2 Equations</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Equation(s):</label>
                                <textarea class="form-control equation-input" id="equation-input" rows="3" 
                                          placeholder="Enter equation(s)...">2x + 3 = 11</textarea>
                            </div>
                            
                            <button class="btn btn-primary" onclick="solveEquation()">
                                <i class="fas fa-calculator"></i> Solve Equation
                            </button>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="result-display" id="equation-result">
                                Enter an equation and click "Solve Equation"
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Programming Calculator Tab -->
            <div class="tab-pane fade" id="programming-tab">
                <div class="section-card animate__animated animate__fadeIn">
                    <div class="section-header">
                        <h4><i class="fas fa-code"></i> Programming Calculator</h4>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Base Conversion</h5>
                            <div class="mb-3">
                                <input type="text" class="form-control" id="base-number" placeholder="Enter number">
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <label class="form-label">From Base:</label>
                                    <select class="form-select" id="from-base">
                                        <option value="2">Binary</option>
                                        <option value="8">Octal</option>
                                        <option value="10" selected>Decimal</option>
                                        <option value="16">Hexadecimal</option>
                                    </select>
                                </div>
                                <div class="col-6">
                                    <label class="form-label">To Base:</label>
                                    <select class="form-select" id="to-base">
                                        <option value="2">Binary</option>
                                        <option value="8">Octal</option>
                                        <option value="10">Decimal</option>
                                        <option value="16" selected>Hexadecimal</option>
                                    </select>
                                </div>
                            </div>
                            <button class="btn btn-primary mb-3" onclick="convertBase()">
                                <i class="fas fa-exchange-alt"></i> Convert
                            </button>
                            
                            <h5>Bitwise Operations</h5>
                            <div class="row">
                                <div class="col-6">
                                    <input type="text" class="form-control" id="bitwise-num1" placeholder="Number 1">
                                </div>
                                <div class="col-6">
                                    <input type="text" class="form-control" id="bitwise-num2" placeholder="Number 2">
                                </div>
                            </div>
                            <div class="mt-2">
                                <button class="btn btn-outline-primary btn-sm" onclick="bitwiseOp('AND')">AND</button>
                                <button class="btn btn-outline-primary btn-sm" onclick="bitwiseOp('OR')">OR</button>
                                <button class="btn btn-outline-primary btn-sm" onclick="bitwiseOp('XOR')">XOR</button>
                                <button class="btn btn-outline-primary btn-sm" onclick="bitwiseOp('NOT')">NOT</button>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="result-display" id="programming-result">
                                Enter values and select operations
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Financial Calculator Tab -->
            <div class="tab-pane fade" id="financial-tab">
                <div class="section-card animate__animated animate__fadeIn">
                    <div class="section-header">
                        <h4><i class="fas fa-dollar-sign"></i> Financial Calculator</h4>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Loan Calculator</h5>
                            <div class="mb-2">
                                <input type="number" class="form-control" id="loan-principal" placeholder="Principal Amount">
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <input type="number" class="form-control" id="loan-rate" placeholder="Annual Rate (%)">
                                </div>
                                <div class="col-6">
                                    <input type="number" class="form-control" id="loan-years" placeholder="Years">
                                </div>
                            </div>
                            <button class="btn btn-primary mt-2" onclick="calculateLoan()">
                                <i class="fas fa-calculator"></i> Calculate Loan
                            </button>
                            
                            <h5 class="mt-4">Tip Calculator</h5>
                            <div class="mb-2">
                                <input type="number" class="form-control" id="bill-amount" placeholder="Bill Amount">
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <input type="number" class="form-control" id="tip-percent" placeholder="Tip %">
                                </div>
                                <div class="col-6">
                                    <input type="number" class="form-control" id="people-count" placeholder="People">
                                </div>
                            </div>
                            <button class="btn btn-success mt-2" onclick="calculateTip()">
                                <i class="fas fa-receipt"></i> Calculate Tip
                            </button>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="result-display" id="financial-result">
                                Enter financial values and calculate
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Health Calculator Tab -->
            <div class="tab-pane fade" id="health-tab">
                <div class="section-card animate__animated animate__fadeIn">
                    <div class="section-header">
                        <h4><i class="fas fa-heartbeat"></i> Health Calculator</h4>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <h5>BMI Calculator</h5>
                            <div class="row">
                                <div class="col-6">
                                    <input type="number" class="form-control" id="weight-kg" placeholder="Weight (kg)">
                                </div>
                                <div class="col-6">
                                    <input type="number" class="form-control" id="height-cm" placeholder="Height (cm)">
                                </div>
                            </div>
                            <button class="btn btn-primary mt-2" onclick="calculateBMI()">
                                <i class="fas fa-weight"></i> Calculate BMI
                            </button>
                            
                            <h5 class="mt-4">BMR Calculator</h5>
                            <div class="row">
                                <div class="col-6">
                                    <input type="number" class="form-control" id="bmr-age" placeholder="Age">
                                </div>
                                <div class="col-6">
                                    <select class="form-select" id="bmr-gender">
                                        <option value="male">Male</option>
                                        <option value="female">Female</option>
                                    </select>
                                </div>
                            </div>
                            <button class="btn btn-info mt-2" onclick="calculateBMR()">
                                <i class="fas fa-fire"></i> Calculate BMR
                            </button>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="result-display" id="health-result">
                                Enter health measurements
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Statistics Calculator Tab -->
            <div class="tab-pane fade" id="statistics-tab">
                <div class="section-card animate__animated animate__fadeIn">
                    <div class="section-header">
                        <h4><i class="fas fa-chart-bar"></i> Statistics Calculator</h4>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Numbers (comma-separated):</label>
                                <textarea class="form-control" id="stats-numbers" rows="3" 
                                          placeholder="e.g., 1, 2, 3, 4, 5, 6, 7, 8, 9, 10">1, 2, 3, 4, 5, 6, 7, 8, 9, 10</textarea>
                            </div>
                            <button class="btn btn-primary" onclick="calculateStatistics()">
                                <i class="fas fa-chart-bar"></i> Calculate Statistics
                            </button>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="result-display" id="statistics-result">
                                Enter numbers and calculate statistics
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Matrix Calculator Tab -->
            <div class="tab-pane fade" id="matrix-tab">
                <div class="section-card animate__animated animate__fadeIn">
                    <div class="section-header">
                        <h4><i class="fas fa-table"></i> Matrix Calculator</h4>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Matrix A (rows separated by ;, columns by ,):</label>
                                <textarea class="form-control matrix-input" id="matrix-a" rows="3" 
                                          placeholder="e.g., 1,2;3,4">1,2;3,4</textarea>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Matrix B:</label>
                                <textarea class="form-control matrix-input" id="matrix-b" rows="3" 
                                          placeholder="e.g., 5,6;7,8">5,6;7,8</textarea>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Operation:</label>
                                <select class="form-select" id="matrix-operation">
                                    <option value="add">Add</option>
                                    <option value="multiply">Multiply</option>
                                    <option value="determinant">Determinant</option>
                                    <option value="inverse">Inverse</option>
                                    <option value="transpose">Transpose</option>
                                </select>
                            </div>
                            
                            <button class="btn btn-primary" onclick="performMatrixOperation()">
                                <i class="fas fa-calculator"></i> Calculate
                            </button>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="result-display" id="matrix-result">
                                Enter matrices and select operation
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="footer-info animate__animated animate__fadeInUp">
            <h6><i class="fas fa-gem text-danger"></i> Ruby Calculator Pro</h6>
            <p class="mb-1">Advanced Mathematical & Scientific Calculator Suite</p>
            <p class="mb-1">© 2026 <a href="https://rskworld.in" target="_blank" class="text-white">RSK World</a></p>
            <p class="mb-0">Developed by: Molla Samser (Founder) | Rima Khatun (Designer & Tester)</p>
            <p class="mb-0">Contact: <a href="mailto:help@rskworld.in" class="text-white">help@rskworld.in</a> | +91 93305 39277</p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let functionChart = null;

        // Graphing Functions
        function plotFunction() {
            const equation = document.getElementById('graph-equation').value;
            const xMin = parseFloat(document.getElementById('x-min').value);
            const xMax = parseFloat(document.getElementById('x-max').value);
            
            fetch('/advanced/plot_function', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ equation, x_min: xMin, x_max: xMax })
            }).then(response => response.json())
              .then(data => {
                  if (data.graph_data) {
                      displayGraph(data.graph_data);
                      document.getElementById('graph-result').innerHTML = 
                          `Function: ${data.graph_data.equation}<br>Points plotted: ${data.graph_data.data_points.length}`;
                  } else {
                      document.getElementById('graph-result').innerHTML = 'Error: ' + (data.error || 'Unknown error');
                  }
              });
        }

        function displayGraph(graphData) {
            const ctx = document.getElementById('function-chart').getContext('2d');
            
            if (functionChart) {
                functionChart.destroy();
            }
            
            functionChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: graphData.data_points.map(p => p.x),
                    datasets: [{
                        label: graphData.equation,
                        data: graphData.data_points.map(p => p.y),
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: { title: { display: true, text: 'X' } },
                        y: { title: { display: true, text: 'Y' } }
                    }
                }
            });
        }

        function findRoots() {
            const equation = document.getElementById('graph-equation').value;
            const xMin = parseFloat(document.getElementById('x-min').value);
            const xMax = parseFloat(document.getElementById('x-max').value);
            
            fetch('/advanced/plot_function', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ equation, x_min: xMin, x_max: xMax })
            }).then(response => response.json())
              .then(data => {
                  if (data.roots) {
                      document.getElementById('graph-result').innerHTML = 
                          `Roots found: ${data.roots.join(', ')}`;
                  }
              });
        }

        function calculateDerivative() {
            const equation = document.getElementById('graph-equation').value;
            const xValue = 0;
            
            fetch('/advanced/calculate_derivative', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ equation, x_value: xValue })
            }).then(response => response.json())
              .then(data => {
                  document.getElementById('graph-result').innerHTML = 
                      `Derivative at x=${xValue}: ${data.derivative}`;
              });
        }

        function calculateIntegral() {
            const equation = document.getElementById('graph-equation').value;
            const a = parseFloat(document.getElementById('x-min').value);
            const b = parseFloat(document.getElementById('x-max').value);
            
            fetch('/advanced/calculate_integral', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ equation, a, b })
            }).then(response => response.json())
              .then(data => {
                  document.getElementById('graph-result').innerHTML = 
                      `Integral from ${a} to ${b}: ${data.integral}`;
              });
        }

        // Equation Solver
        function solveEquation() {
            const type = document.getElementById('equation-type').value;
            const equations = document.getElementById('equation-input').value;
            
            fetch('/advanced/solve_equation', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ equation_type: type, equation: equations })
            }).then(response => response.json())
              .then(data => {
                  let result = '';
                  if (data.solution !== undefined) {
                      result = `Solution: ${data.solution}`;
                  } else if (data.solutions) {
                      result = `Solutions: ${data.solutions.join(', ')}`;
                  }
                  
                  if (data.steps) {
                      result += '<br><br>Steps:<br>' + data.steps.join('<br>');
                  }
                  
                  if (data.error) {
                      result = 'Error: ' + data.error;
                  }
                  
                  document.getElementById('equation-result').innerHTML = result;
              });
        }

        // Programming Calculator
        function convertBase() {
            const number = document.getElementById('base-number').value;
            const fromBase = parseInt(document.getElementById('from-base').value);
            const toBase = parseInt(document.getElementById('to-base').value);
            
            fetch('/advanced/convert_base', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ number, from_base: fromBase, to_base: toBase })
            }).then(response => response.json())
              .then(data => {
                  if (data.result) {
                      document.getElementById('programming-result').innerHTML = 
                          `Result: ${data.result}`;
                  } else {
                      document.getElementById('programming-result').innerHTML = 'Error: ' + (data.error || 'Conversion failed');
                  }
              });
        }

        function bitwiseOp(operation) {
            const num1 = document.getElementById('bitwise-num1').value;
            const num2 = document.getElementById('bitwise-num2').value;
            
            fetch('/advanced/bitwise_operation', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ num1, num2, operation })
            }).then(response => response.json())
              .then(data => {
                  if (data.binary) {
                      document.getElementById('programming-result').innerHTML = 
                          `Binary: ${data.binary}<br>Decimal: ${data.decimal}<br>Hex: ${data.hexadecimal}`;
                  } else {
                      document.getElementById('programming-result').innerHTML = 'Error: ' + (data.error || 'Operation failed');
                  }
              });
        }

        // Financial Calculator
        function calculateLoan() {
            const principal = parseFloat(document.getElementById('loan-principal').value);
            const rate = parseFloat(document.getElementById('loan-rate').value);
            const years = parseInt(document.getElementById('loan-years').value);
            
            fetch('/advanced/calculate_loan', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ principal, annual_rate: rate, years })
            }).then(response => response.json())
              .then(data => {
                  document.getElementById('financial-result').innerHTML = 
                      `Monthly Payment: $${data.monthly_payment}<br>` +
                      `Total Payment: $${data.total_payment}<br>` +
                      `Total Interest: $${data.total_interest}`;
              });
        }

        function calculateTip() {
            const billAmount = parseFloat(document.getElementById('bill-amount').value);
            const tipPercent = parseFloat(document.getElementById('tip-percent').value);
            const people = parseInt(document.getElementById('people-count').value);
            
            fetch('/advanced/calculate_tip', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ bill_amount: billAmount, tip_percentage: tipPercent, number_of_people: people })
            }).then(response => response.json())
              .then(data => {
                  document.getElementById('financial-result').innerHTML = 
                      `Tip Amount: $${data.tip_amount}<br>` +
                      `Total Amount: $${data.total_amount}<br>` +
                      `Per Person: $${data.amount_per_person}`;
              });
        }

        // Health Calculator
        function calculateBMI() {
            const weight = parseFloat(document.getElementById('weight-kg').value);
            const height = parseFloat(document.getElementById('height-cm').value);
            
            fetch('/advanced/calculate_bmi', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ weight, height_cm: height })
            }).then(response => response.json())
              .then(data => {
                  document.getElementById('health-result').innerHTML = 
                      `BMI: ${data.bmi}<br>` +
                      `Category: ${data.category}<br>` +
                      `Ideal Weight Range: ${data.ideal_weight_min} - ${data.ideal_weight_max} kg`;
              });
        }

        function calculateBMR() {
            const weight = parseFloat(document.getElementById('weight-kg').value);
            const height = parseFloat(document.getElementById('height-cm').value);
            const age = parseInt(document.getElementById('bmr-age').value);
            const gender = document.getElementById('bmr-gender').value;
            
            fetch('/advanced/calculate_bmr', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ weight, height_cm: height, age, gender })
            }).then(response => response.json())
              .then(data => {
                  document.getElementById('health-result').innerHTML = 
                      `BMR: ${data.bmr} calories/day`;
              });
        }

        // Statistics Calculator
        function calculateStatistics() {
            const numbers = document.getElementById('stats-numbers').value;
            
            fetch('/advanced/calculate_statistics', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ numbers })
            }).then(response => response.json())
              .then(data => {
                  document.getElementById('statistics-result').innerHTML = 
                      `Count: ${data.count}<br>` +
                      `Mean: ${data.mean}<br>` +
                      `Median: ${data.median}<br>` +
                      `Standard Deviation: ${data.standard_deviation}<br>` +
                      `Min: ${data.min}<br>` +
                      `Max: ${data.max}`;
              });
        }

        // Matrix Calculator
        function performMatrixOperation() {
            const matrixA = document.getElementById('matrix-a').value;
            const matrixB = document.getElementById('matrix-b').value;
            const operation = document.getElementById('matrix-operation').value;
            
            fetch('/advanced/matrix_operations', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ matrix_a: matrixA, matrix_b: matrixB, operation })
            }).then(response => response.json())
              .then(data => {
                  let result = '';
                  if (data.result) {
                      result = 'Result:<br>' + formatMatrix(data.result);
                  } else if (data.determinant !== undefined) {
                      result = `Determinant: ${data.determinant}`;
                  } else if (data.error) {
                      result = 'Error: ' + data.error;
                  }
                  
                  document.getElementById('matrix-result').innerHTML = result;
              });
        }

        function formatMatrix(matrix) {
            return matrix.map(row => row.join(', ')).join('<br>');
        }

        // Initialize with a sample plot
        window.addEventListener('load', function() {
            plotFunction();
        });
    </script>
</body>
</html>
