<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.8">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script defer data-domain="tools.badheshchauhan.com"  src="https://getanalyzr.vercel.app/tracking-script.js"></script>


    <title>Data Display</title> 
    <style>
        thead th {
            position: sticky;
            top: 0;
            z-index: 2;
        }

        #searchInput {
            width: 90%;
            padding: 10px;
            border: none;
            border-radius: 25px;
            color: #fff;
            font-size: 20px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
            outline: none;
            transition: background-image 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }


        /* Hover styles for the search input and search button */
        #searchInput:hover,
        #searchBtn:hover {
            background-image: linear-gradient(to right, #a89ba2, #dbdee3);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);

        }

        /* Focus styles for the search input */
        #searchInput:focus {
            background-image: linear-gradient(to right, #a5979f, #a7b0b9);
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
        }

        body {
            margin: 5px;
        }

        table {
            margin-bottom: 20px;
        }

        th {
            position: sticky;
            top: 0;
            z-index: 1;
        }

        td {
            overflow-wrap: break-word;
        }

        .btn,
        #delay,
        .alert {
            margin: 5px;
        }


        body {
            padding-top: 5px;
        }


        .delete-icon {
            cursor: pointer;
            color: red;
            margin-left: 5px;
            display: none;
        }

        th:hover .delete-icon,
        td:hover .delete-icon {
            display: inline;
        }

        .delete-icon:hover {
            color: rgb(228, 17, 17);
        }

        /* .btn-block {
            display: none;
        } */




        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }

            th,
            td {
                padding: 6px;
                font-size: 0.8rem;
            }
        }
    </style>
</head>

<body>
    <div class="col-xs-3">
        <center>
            <button type="button" class="btn btn-success download-button  btn-block" id='csv'
                onclick="tableToCSV('csv')"><span class="glyphicon glyphicon-download-alt"></span> CSV</button>
            <button type="button" class="btn btn-success download-button  btn-block" id='xlsx'
                onclick="tableToCSV('xlsx')"><span class="glyphicon glyphicon-download-alt"></span> XLSX</button>
            <button type="button" class="btn btn-success download-button  btn-block" id='copy'
                onclick="tableToCSV('copy')"><span class="glyphicon glyphicon-copy"></span> COPY ALL</button>
            <button type="button" class="btn btn-warning btn-block" id='resetColumns' onclick="resetTable()">Reset
                columns</button>
        </center>
    </div>

    <br>
    <div>
        <center> <input type="text" id="searchInput" placeholder="Search Data in Table Example" style="display: none;">
        </center> <br>

        <table id="data-table" class="table table-bordered table-sm table-hover border-primary table-responsive">
            <thead class="table-success">
                <tr id="table-header"></tr>
            </thead>
            <tbody id="table-body"></tbody>
        </table>

        <script src="script/data_display.js"></script>

        <script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>


</body>

</html>