<?php
$servername = "localhost";
$username = "u836566291_pcs";
$password = "VSJgO:Y8=rZ";
$dbname = "u836566291_pcs";

try {
    $con = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    echo "";
} catch (PDOException $e) {
    echo "error:" . $e->getMessage();
}
?>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>View Data</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.4/css/select.dataTables.min.css">
    <link rel="stylesheet" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
</head>

<body>
    <div class="container">
        <h1 class="text-center">Data From Database</h1>
        <div class="col-md-6 col-md-offset-3"><a href="index.php" class="btn btn-danger btn-block btn-lg">Add New Client Data</a></div>
    </div>

    <div class="container-fluid">
        <table id="myTable" class="table table-striped table-no-bordered table-hover display">
            <thead>
                <tr>
                    <th>Candidate's Roll</th>
                    <th>Candidate's Name</th>
                    <th>Father Name</th>
                    <th>Post</th>
                    <th>DOB</th>
                    <th>Remarks</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <?php
                $select = $con->prepare("SELECT * FROM `data`");
                $select->setFetchMode(PDO::FETCH_ASSOC);
                $select->execute();

                while ($data = $select->fetch()) {
                ?>
                    <tr>
                        <td contenteditable="true" data-id="<?php echo $data['id']; ?>" data-column="roll"><?php echo $data['roll']; ?></td>
                        <td contenteditable="true" data-id="<?php echo $data['id']; ?>" data-column="cname"><?php echo $data['cname']; ?></td>
                        <td contenteditable="true" data-id="<?php echo $data['id']; ?>" data-column="fname"><?php echo $data['fname']; ?></td>
                        <td contenteditable="true" data-id="<?php echo $data['id']; ?>" data-column="post"><?php echo $data['post']; ?></td>
                        <td contenteditable="true" data-id="<?php echo $data['id']; ?>" data-column="dob"><?php echo $data['dob']; ?></td>
                        <td contenteditable="true" data-id="<?php echo $data['id']; ?>" data-column="remarks"><?php echo $data['remarks']; ?></td>
                        <td><a href="delete.php?id=<?php echo $data['id']; ?>" onclick="return confirm('Are you sure you want to delete this item?');" class="btn btn-link btn-danger btn-just-icon remove"><i class="glyphicon glyphicon-remove"></i></a></td>
                    </tr>
                <?php
                } ?>
            </tbody>
        </table>
    </div>
    <div class="container">
        <div class="col-md-6 col-md-offset-3"><a href="index.php" class="btn btn-danger btn-block btn-lg">Add New Client Data</a></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.3.4/js/dataTables.select.min.js"></script>
    <script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#myTable').DataTable();

            $('td[contenteditable=true]').blur(function() {
                var id = $(this).data('id');
                var column = $(this).data('column');
                var value = $(this).text();

                $.ajax({
                    url: 'update.php',
                    type: 'POST',
                    data: {
                        id: id,
                        column: column,
                        value: value
                    },
                    success: function(response) {
                        if (response == 'success') {
                            swal("Success!", "Data updated successfully!", "success");
                        } else {
                            swal("Error!", "Failed to update data.", "error");
                        }
                    }
                });
            });
        });
    </script>
</body>

</html>
