
<?php
require_once '../../config/database.php';
require_once '../../config/auth.php';
require_once '../../includes/header.php';
require_once '../../includes/sidebar.php';
require_once 'FuzzyTsukamoto.php';
require_once '../compatibility/validator.php';

requireLogin();

$db = getDB();
$message = '';
$calculationResult = null;
$error_messages = [];
$chartData = null;

// Ambil data komponen untuk dropdown
$processors = $db->query("SELECT * FROM processors ORDER BY name")->fetchAll();
$motherboards = $db->query("SELECT * FROM motherboards ORDER BY name")->fetchAll();
$vga_cards = $db->query("SELECT * FROM vga_cards ORDER BY name")->fetchAll();
$rams = $db->query("SELECT * FROM ram ORDER BY name")->fetchAll();
$storages = $db->query("SELECT * FROM storage ORDER BY name")->fetchAll();
$casings = $db->query("SELECT * FROM casing ORDER BY name")->fetchAll();
$power_supplies = $db->query("SELECT * FROM power_supply ORDER BY name")->fetchAll();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $components = [];
    $selectedComponents = [
        'processor' => ['table' => 'processors', 'id' => $_POST['processor_id'] ?? null],
        'motherboard' => ['table' => 'motherboards', 'id' => $_POST['motherboard_id'] ?? null],
        'vga' => ['table' => 'vga_cards', 'id' => $_POST['vga_id'] ?? null],
        'ram' => ['table' => 'ram', 'id' => $_POST['ram_id'] ?? null],
        'storage' => ['table' => 'storage', 'id' => $_POST['storage_id'] ?? null],
        'casing' => ['table' => 'casing', 'id' => $_POST['casing_id'] ?? null],
        'power_supply' => ['table' => 'power_supply', 'id' => $_POST['power_supply_id'] ?? null]
    ];
    
    foreach ($selectedComponents as $type => $info) {
        if (!empty($info['id'])) {
            $stmt = $db->prepare("SELECT * FROM {$info['table']} WHERE id = ?");
            $stmt->execute([$info['id']]);
            $components[$type] = $stmt->fetch();
        }
    }
    
    if (!empty($components)) {
        // Validasi kompatibilitas
        $validator = new CompatibilityValidator($db);
        $compatibility_errors = $validator->validate($components);
        
        if (!empty($compatibility_errors)) {
            $message = 'error';
            $error_messages = $compatibility_errors;
        } else {
            // Lanjut perhitungan fuzzy jika tidak ada error
            $fuzzy = new FuzzyTsukamoto();
            $calculationResult = $fuzzy->calculateSellingPrice($components);
            
            // Prepare chart data dengan urutan yang benar
            $chartData = [
                'labels' => [],
                'basePrice' => [],
                'sellingPrice' => [],
                'componentNames' => []
            ];

            // Urutan komponen yang diinginkan
            $componentOrder = ['processor', 'motherboard', 'vga', 'ram', 'storage', 'casing', 'power_supply'];

            // Buat array asosiatif untuk memudahkan pencarian
            $calculationsByType = [];
            foreach ($calculationResult['calculations'] as $calc) {
                $calculationsByType[$calc['type']] = $calc;
            }

            // Susun data sesuai urutan
            foreach ($componentOrder as $type) {
                if (isset($calculationsByType[$type])) {
                    $calc = $calculationsByType[$type];
                    $chartData['labels'][] = ucfirst($type);
                    $chartData['basePrice'][] = floatval($calc['base_price']);
                    $chartData['sellingPrice'][] = floatval($calc['final_price']);
                    $chartData['componentNames'][] = $calc['name'];
                }
            }
            
            try {
                $stmt = $db->prepare("
                    INSERT INTO calculations (
                        user_id, processor_id, motherboard_id, vga_id, 
                        ram_id, storage_id, casing_id, power_supply_id, calculated_price
                    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
                ");
                $stmt->execute([
                    $_SESSION['user_id'],
                    $_POST['processor_id'] ?? null,
                    $_POST['motherboard_id'] ?? null,
                    $_POST['vga_id'] ?? null,
                    $_POST['ram_id'] ?? null,
                    $_POST['storage_id'] ?? null,
                    $_POST['casing_id'] ?? null,
                    $_POST['power_supply_id'] ?? null,
                    $calculationResult['price']
                ]);
                $message = 'success';
            } catch (PDOException $e) {
                $message = 'error';
                $error_messages[] = 'Terjadi kesalahan saat menyimpan perhitungan!';
            }
        }
    }
}
?>
<!-- Content Wrapper -->
<div class="content-wrapper">
    <!-- Content Header -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Hitung Harga Jual</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- Form Card -->
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Pilih Komponen</h3>
                </div>
                <div class="card-body">
                    <?php if ($message === 'success'): ?>
                        <div class="alert alert-success">
                            Perhitungan berhasil!
                        </div>
                    <?php endif; ?>

                    <?php if ($message === 'error' && !empty($error_messages)): ?>
                        <div class="alert alert-danger">
                            <h5><i class="icon fas fa-ban"></i> Terjadi Kesalahan!</h5>
                            <ul>
                                <?php foreach ($error_messages as $error): ?>
                                    <li><?php echo $error; ?></li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    <?php endif; ?>

                    <form method="POST">
                        <div class="row">
                            <!-- Processor -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="processor_id">Processor</label>
                                    <select name="processor_id" id="processor_id" class="form-control select2">
                                        <option value="">Pilih Processor</option>
                                        <?php foreach ($processors as $proc): ?>
                                            <option value="<?php echo $proc['id']; ?>" 
                                                    <?php echo (isset($_POST['processor_id']) && $_POST['processor_id'] == $proc['id']) ? 'selected' : ''; ?>>
                                                <?php echo htmlspecialchars($proc['name']); ?> - 
                                                Rp <?php echo number_format($proc['price'], 0, ',', '.'); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <!-- Motherboard -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="motherboard_id">Motherboard</label>
                                    <select name="motherboard_id" id="motherboard_id" class="form-control select2">
                                        <option value="">Pilih Motherboard</option>
                                        <?php foreach ($motherboards as $mb): ?>
                                            <option value="<?php echo $mb['id']; ?>" 
                                                    <?php echo (isset($_POST['motherboard_id']) && $_POST['motherboard_id'] == $mb['id']) ? 'selected' : ''; ?>>
                                                <?php echo htmlspecialchars($mb['name']); ?> - 
                                                Rp <?php echo number_format($mb['price'], 0, ',', '.'); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <!-- VGA -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="vga_id">VGA</label>
                                    <select name="vga_id" id="vga_id" class="form-control select2">
                                        <option value="">Pilih VGA</option>
                                        <?php foreach ($vga_cards as $vga): ?>
                                            <option value="<?php echo $vga['id']; ?>" 
                                                    data-wattage="<?php echo $vga['wattage']; ?>"
                                                    <?php echo (isset($_POST['vga_id']) && $_POST['vga_id'] == $vga['id']) ? 'selected' : ''; ?>>
                                                <?php echo htmlspecialchars($vga['name']); ?> 
                                                (<?php echo $vga['wattage']; ?>W) - 
                                                Rp <?php echo number_format($vga['price'], 0, ',', '.'); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <!-- RAM -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="ram_id">RAM</label>
                                    <select name="ram_id" id="ram_id" class="form-control select2">
                                        <option value="">Pilih RAM</option>
                                        <?php foreach ($rams as $ram): ?>
                                            <option value="<?php echo $ram['id']; ?>" 
                                                    <?php echo (isset($_POST['ram_id']) && $_POST['ram_id'] == $ram['id']) ? 'selected' : ''; ?>>
                                                <?php echo htmlspecialchars($ram['name']); ?> - 
                                                Rp <?php echo number_format($ram['price'], 0, ',', '.'); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <!-- Storage -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="storage_id">Storage</label>
                                    <select name="storage_id" id="storage_id" class="form-control select2">
                                        <option value="">Pilih Storage</option>
                                        <?php foreach ($storages as $storage): ?>
                                            <option value="<?php echo $storage['id']; ?>" 
                                                    <?php echo (isset($_POST['storage_id']) && $_POST['storage_id'] == $storage['id']) ? 'selected' : ''; ?>>
                                                <?php echo htmlspecialchars($storage['name']); ?> - 
                                                Rp <?php echo number_format($storage['price'], 0, ',', '.'); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <!-- Power Supply -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="power_supply_id">Power Supply</label>
                                    <select name="power_supply_id" id="power_supply_id" class="form-control select2">
                                        <option value="">Pilih Power Supply</option>
                                        <?php foreach ($power_supplies as $psu): ?>
                                            <option value="<?php echo $psu['id']; ?>" 
                                                    data-wattage="<?php echo $psu['wattage']; ?>"
                                                    <?php echo (isset($_POST['power_supply_id']) && $_POST['power_supply_id'] == $psu['id']) ? 'selected' : ''; ?>>
                                                <?php echo htmlspecialchars($psu['name']); ?> 
                                                (<?php echo $psu['wattage']; ?>W) - 
                                                Rp <?php echo number_format($psu['price'], 0, ',', '.'); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <!-- Casing -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="casing_id">Casing</label>
                                    <select name="casing_id" id="casing_id" class="form-control select2">
                                        <option value="">Pilih Casing</option>
                                        <?php foreach ($casings as $casing): ?>
                                            <option value="<?php echo $casing['id']; ?>" 
                                                    <?php echo (isset($_POST['casing_id']) && $_POST['casing_id'] == $casing['id']) ? 'selected' : ''; ?>>
                                                <?php echo htmlspecialchars($casing['name']); ?> - 
                                                Rp <?php echo number_format($casing['price'], 0, ',', '.'); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Power Requirement Warning -->
                        <div id="power-warning" class="mb-3"></div>

                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-calculator"></i> Hitung Harga
                        </button>
                    </form>
                </div>
            </div>
<?php if ($calculationResult): ?>
            <!-- Result Cards -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">Hasil Perhitungan</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="callout callout-success">
                                <h4>Harga Jual yang Disarankan:</h4>
                                <h2 class="text-success">
                                    Rp <?php echo number_format($calculationResult['price'], 0, ',', '.'); ?>
                                </h2>
                            </div>
                        </div>
                    </div>

                    <!-- Price Charts -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Perbandingan Harga</h3>
                                </div>
                                <div class="card-body">
                                    <canvas id="priceComparisonChart" height="300"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Komposisi Harga</h3>
                                </div>
                                <div class="card-body">
                                    <canvas id="priceCompositionChart" height="300"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Fuzzy Membership Visualization -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Visualisasi Fuzzy Membership</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Performance/Quality Membership</h3>
                                        </div>
                                        <div class="card-body">
                                            <canvas id="performanceMembershipChart" height="250"></canvas>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Age Membership</h3>
                                        </div>
                                        <div class="card-body">
                                            <canvas id="ageMembershipChart" height="250"></canvas>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Type Membership</h3>
                                        </div>
                                        <div class="card-body">
                                            <canvas id="typeMembershipChart" height="250"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Calculation Details -->
                   <div class="card card-outline card-primary">
    <div class="card-header">
        <h3 class="card-title">Detail Perhitungan</h3>
    </div>
    <div class="card-body">
        <?php 
        // Gunakan data yang sudah diurutkan
        foreach ($componentOrder as $type): 
            if (isset($calculationsByType[$type])):
                $calc = $calculationsByType[$type];
        ?>
        <div class="card card-outline card-secondary mb-3">
            <div class="card-header">
                <h3 class="card-title">
                    <?php echo ucfirst($calc['type']); ?> - 
                    <?php echo htmlspecialchars($calc['name']); ?>
                </h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Rule</th>
                                <th>Alpha</th>
                                <th>Markup</th>
                                <th>Kontribusi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($calc['rules'] as $rule): ?>
                            <tr>
                                <td><?php echo $rule['condition']; ?></td>
                                <td><?php echo number_format($rule['alpha'], 4); ?></td>
                                <td><?php echo number_format(($rule['markup'] - 1) * 100, 1) . '%'; ?></td>
                                <td>Rp <?php echo number_format($rule['weighted_price'], 0, ',', '.'); ?></td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <?php 
            endif;
        endforeach; 
        ?>
    </div>
</div>
                </div>
            </div>
            <?php endif; ?>

        </div>
    </section>
</div>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<?php if ($calculationResult): ?>
<script>
// Data dari PHP
const chartData = <?php echo json_encode($chartData); ?>;

// Definisikan warna untuk setiap komponen
const componentColors = {
    backgroundColor: [
        'rgba(60,141,188,0.8)',   // Processor - Biru
        'rgba(40,167,69,0.8)',    // Motherboard - Hijau
        'rgba(255,193,7,0.8)',    // VGA - Kuning
        'rgba(220,53,69,0.8)',    // RAM - Merah
        'rgba(108,117,125,0.8)',  // Storage - Abu-abu
        'rgba(23,162,184,0.8)',   // Casing - Cyan
        'rgba(153,102,255,0.8)'   // Power Supply - Ungu
    ],
    borderColor: [
        'rgba(60,141,188,1)',
        'rgba(40,167,69,1)',
        'rgba(255,193,7,1)',
        'rgba(220,53,69,1)',
        'rgba(108,117,125,1)',
        'rgba(23,162,184,1)',
        'rgba(153,102,255,1)'
    ]
};

// Price Comparison Chart
new Chart(document.getElementById('priceComparisonChart'), {
    type: 'bar',
    data: {
        labels: chartData.labels,
        datasets: [
            {
                label: 'Harga Dasar',
                data: chartData.basePrice,
                backgroundColor: 'rgba(60,141,188,0.5)',
                borderColor: 'rgba(60,141,188,1)',
                borderWidth: 1
            },
            {
                label: 'Harga Jual',
                data: chartData.sellingPrice,
                backgroundColor: 'rgba(40,167,69,0.5)',
                borderColor: 'rgba(40,167,69,1)',
                borderWidth: 1
            }
        ]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return 'Rp ' + new Intl.NumberFormat('id-ID').format(value);
                    }
                }
            }
        },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.dataset.label + ': Rp ' + 
                               new Intl.NumberFormat('id-ID').format(context.raw);
                    }
                }
            }
        }
    }
});

// Price Composition Chart
new Chart(document.getElementById('priceCompositionChart'), {
    type: 'pie',
    data: {
        labels: chartData.componentNames,
        datasets: [{
            data: chartData.sellingPrice,
            backgroundColor: componentColors.backgroundColor.slice(0, chartData.sellingPrice.length),
            borderColor: componentColors.borderColor.slice(0, chartData.sellingPrice.length),
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'right'
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const value = context.raw;
                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                        const percentage = ((value / total) * 100).toFixed(1);
                        return `${context.label}: Rp ${new Intl.NumberFormat('id-ID').format(value)} (${percentage}%)`;
                    }
                }
            }
        }
    }
});

// Fuzzy Membership Functions Visualization
function generateMembershipData(min, max, step) {
    const data = [];
    for (let x = min; x <= max; x += step) {
        data.push(x);
    }
    return data;
}

// Performance Membership Chart
const xPerformance = generateMembershipData(0, 10, 0.1);
new Chart(document.getElementById('performanceMembershipChart'), {
    type: 'line',
    data: {
        labels: xPerformance,
        datasets: [
            {
                label: 'Low',
                data: xPerformance.map(x => {
                    if (x <= 1) return 1;
                    if (x > 1 && x < 4) return (4 - x) / 3;
                    return 0;
                }),
                borderColor: 'rgba(220,53,69,1)',
                fill: false
            },
            {
                label: 'Medium',
                data: xPerformance.map(x => {
                    if (x >= 4 && x <= 6) return 1;
                    if (x > 3 && x < 4) return (x - 3) / 1;
                    if (x > 6 && x < 7) return (7 - x) / 1;
                    return 0;
                }),
                borderColor: 'rgba(255,193,7,1)',
                fill: false
            },
            {
                label: 'High',
                data: xPerformance.map(x => {
                    if (x >= 9) return 1;
                    if (x > 6 && x < 9) return (x - 6) / 3;
                    return 0;
                }),
                borderColor: 'rgba(40,167,69,1)',
                fill: false
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Performance/Quality Membership Functions'
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                max: 1
            }
        }
    }
});

const xAge = generateMembershipData(0, 5, 0.1);
new Chart(document.getElementById('ageMembershipChart'), {
    type: 'line',
    data: {
        labels: xAge,
        datasets: [
            {
                label: 'Baru',
                data: xAge.map(x => {
                    if (x <= 0.5) return 1;
                    if (x > 0.5 && x < 1.5) return (1.5 - x) / 1;
                    return 0;
                }),
                borderColor: 'rgba(40,167,69,1)',
                fill: false
            },
            {
                label: 'Lama',
                data: xAge.map(x => {
                    if (x >= 1.5 && x <= 2.5) return 1;
                    if (x > 1 && x < 1.5) return (x - 1) / 0.5;
                    if (x > 2.5 && x < 3) return (3 - x) / 0.5;
                    return 0;
                }),
                borderColor: 'rgba(255,193,7,1)',
                fill: false
            },
            {
                label: 'Sangat Lama',
                data: xAge.map(x => {
                    if (x >= 4) return 1;
                    if (x > 2.5 && x < 4) return (x - 2.5) / 1.5;
                    return 0;
                }),
                borderColor: 'rgba(220,53,69,1)',
                fill: false
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Age Membership Functions'
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                max: 1
            }
        }
    }
});

// Type Membership Chart
const xType = generateMembershipData(0, 1, 0.02);
new Chart(document.getElementById('typeMembershipChart'), {
    type: 'line',
    data: {
        labels: xType,
        datasets: [
            {
                label: 'Low/Basic',
                data: xType.map(x => {
                    if (x <= 0.2) return 1;
                    if (x > 0.2 && x < 0.4) return (0.4 - x) / 0.2;
                    return 0;
                }),
                borderColor: 'rgba(220,53,69,1)',
                fill: false
            },
            {
                label: 'Medium',
                data: xType.map(x => {
                    if (x >= 0.4 && x <= 0.6) return 1;
                    if (x > 0.3 && x < 0.4) return (x - 0.3) / 0.1;
                    if (x > 0.6 && x < 0.7) return (0.7 - x) / 0.1;
                    return 0;
                }),
                borderColor: 'rgba(255,193,7,1)',
                fill: false
            },
            {
                label: 'High/Advanced',
                data: xType.map(x => {
                    if (x >= 0.8) return 1;
                    if (x > 0.6 && x < 0.8) return (x - 0.6) / 0.2;
                    return 0;
                }),
                borderColor: 'rgba(40,167,69,1)',
                fill: false
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Type Membership Functions'
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                max: 1
            }
        }
    }
});
</script>
<?php endif; ?>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2({
        theme: 'bootstrap4',
        width: '100%'
    });

    // Power Requirement Check
    function checkPowerRequirement() {
        const vgaSelect = $('#vga_id');
        const psuSelect = $('#power_supply_id');
        const warningDiv = $('#power-warning');
        
        if (vgaSelect.val() && psuSelect.val()) {
            const selectedVGA = vgaSelect.find('option:selected');
            const selectedPSU = psuSelect.find('option:selected');
            
            const vgaWattage = parseInt(selectedVGA.data('wattage'));
            const psuWattage = parseInt(selectedPSU.data('wattage'));
            const minimumRequired = vgaWattage + 100; // 100W for system
            
            if (psuWattage < minimumRequired) {
                warningDiv.html(`
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                        Warning: VGA ${selectedVGA.text().split(' - ')[0]} membutuhkan PSU minimal ${minimumRequired}W 
                        (VGA: ${vgaWattage}W + System: 100W)
                    </div>
                `).show();
            } else {
                warningDiv.hide();
            }
        }
    }

    // Event listeners
    $('#vga_id, #power_supply_id').change(function() {
        checkPowerRequirement();
    });

    // Initial check
    checkPowerRequirement();
});
</script>

<?php require_once '../../includes/footer.php'; ?>