<?php

include "../../classes/app.class.php";
$app = new app();
$db = new DBMain();
?>

<div class='container flex_container'>
    <h1>SEARCH TOOLS BY:</h1>
    <div class="container flex_container" style='border: 1px solid black; width:80%;padding: 10px;border-radius: 10px;'>

        <div class='flex_container_content'>
            <!-- <input type='text' id='name' placeholder='Enter Name of the Tool'> -->
            <select id='name' style='font-size:1vw;'>
                <option>Name</option>
                <?php echo $db->get_names_in_dropdown() ?>
            </select>
            <select id='brand' style='font-size:1vw;'>
                <option>Brand</option>
                <?php echo $db->get_brands_in_dropdown() ?>
            </select>
            <input type='text' id='qr_code' placeholder='Enter QR Code Tool'>
            <select id='category' name='category'>
                <option>Category</option>
                <?php echo $db->get_tool_category_list(); ?>
            </select>
        </div>
        <br>
        <button onclick="search_tools()" class='font_size_2vw'>SEARCH</button>
    </div>
</div>

<div class='flex_container' id='tools_content'>

</div>

<script>
    function search_tools() {

        var name = document.getElementById('name').value;
        var brand = document.getElementById('brand').value;
        var qr_code = document.getElementById('qr_code').value;
        category = document.getElementById('category').value;

        var xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            console.log(this.responseText);
            document.getElementById('tools_content').innerHTML = this.responseText;
        }
        xhttp.open("GET", '../../ajax/tools/search_tools.php?name= ' + name + '&brand=' + brand + '&qr_code=' + qr_code + '&category=' + category);
        xhttp.send();
    }

    function edit_tools($id) {
        window.location.href = 'edit_tools.php?record_id=' + $id;
    }
</script>