<?php
// Database connection
$servername = "localhost"; // Your server
$username = "root";        // Your username
$password = "";            // Your password
$dbname = "your_database"; // Your database name

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

// Fetch services from the add_service table
$sql = "SELECT id, service_name, amount FROM add_service";
$result = mysqli_query($conn, $sql);

// Check if query was successful
if (!$result) {
    die("Query failed: " . mysqli_error($conn));
}

$services = [];
while ($row = mysqli_fetch_assoc($result)) {
    $services[] = $row;
}

// Close the connection
mysqli_close($conn);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Service Form</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <script>
        // Function to update the amount field when a service is selected
        function updateAmount() {
            const serviceSelect = document.getElementById('service_name');
            const amountInput = document.getElementById('amount');
            const quantityInput = document.getElementById('quantity');
            const totalInput = document.getElementById('total_amount');
            
            // Get the selected service and its amount
            const selectedService = serviceSelect.options[serviceSelect.selectedIndex];
            const amount = parseFloat(selectedService.getAttribute('data-amount'));
            
            // Populate the amount field
            amountInput.value = amount.toFixed(2);
            
            // Update total amount if quantity is entered
            if (quantityInput.value) {
                totalInput.value = (amount * quantityInput.value).toFixed(2);
            } else {
                totalInput.value = '';
            }
        }

        // Function to update the total amount when quantity is changed
        function updateTotal() {
            const amount = parseFloat(document.getElementById('amount').value);
            const quantity = parseInt(document.getElementById('quantity').value, 10);
            const totalInput = document.getElementById('total_amount');
            
            if (!isNaN(amount) && !isNaN(quantity)) {
                totalInput.value = (amount * quantity).toFixed(2);
            }
        }
    </script>
</head>
<body>

<div class="container mt-5">
    <h2 class="mb-4">Service Details</h2>
    <form action="process_form.php" method="POST">
        <!-- Service Name Dropdown -->
        <div class="mb-3">
            <label for="service_name" class="form-label">Service Name:</label>
            <select id="service_name" name="service_name" class="form-control" onchange="updateAmount()" required>
                <option value="" disabled selected>Select a Service</option>
                <?php foreach ($services as $service): ?>
                    <option value="<?php echo $service['id']; ?>" data-amount="<?php echo $service['amount']; ?>">
                        <?php echo htmlspecialchars($service['service_name']); ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
        
        <!-- Amount Charged -->
        <div class="mb-3">
            <label for="amount" class="form-label">Amount Charged:</label>
            <input type="number" class="form-control" step="0.01" id="amount" name="amount" readonly required>
        </div>
        
        <!-- Quantity Input -->
        <div class="mb-3">
            <label for="quantity" class="form-label">Quantity:</label>
            <input type="number" class="form-control" id="quantity" name="quantity" oninput="updateTotal()" required>
        </div>

        <!-- Total Amount Charged -->
        <div class="mb-3">
            <label for="total_amount" class="form-label">Total Amount Charged:</label>
            <input type="number" class="form-control" id="total_amount" readonly step="0.01" required>
        </div>

        <!-- Date of Service -->
        <div class="mb-3">
            <label for="date_provided" class="form-label">Date of Service:</label>
            <input type="date" class="form-control" id="date_provided" name="date_provided" required>
        </div>

        <!-- Submit Button -->
        <div class="d-flex justify-content-end">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>
