<html>
<?php
include('../includes/config.php');

if (isset($_GET['id']) && $_GET['id'] != NULL) {
    $id = base64_decode($_GET['id']);
    $res = mysqli_query($conn, "SELECT * FROM `mobile` WHERE id='$id'");
    $data = mysqli_fetch_assoc($res);
}
?>
<head>
    <title>Finger Prints</title>
    <link rel="icon" href="https://privacymode.in/assets/images/favicon-32x32.png" type="image/png">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- <script src="jquery.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.2.2/jquery.panzoom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-mousewheel/1.0.5/mousewheel.js"></script>
    <style>
        body {
            background-color: black;
            color: white;
        }

        .fingerprint-layout {
            display: flex;
            flex-wrap: wrap; /* Allow wrapping of images if needed */
            justify-content: center; /* Center the images */
            margin-top: 30px;
            gap: 10px; /* Space between images */
        }

        .finger-row img {
            width: 50px; /* Adjusted size for better fit */
            height: 50px; /* Adjusted size for better fit */
            border: 2px solid white;
            border-radius: 50%;
            transition: transform 0.3s ease;
        }

        .finger-row img:hover {
            transform: scale(1.1);
        }

        .controls {
            text-align: center;
            margin: 20px 0;
        }

        .btn {
            margin: 5px;
        }
    </style>
</head>

<body>

<div class="container">
    <div id="page">
        <div class="row">
            <div class="col-md-12">
                <div class="page-header">
                    <h3 style="color: white">Name - <?php echo $data['name']; ?></h3>
                    <h3 style="color: white">Aadhaar Number - <?php echo $data['aadhaar_no']; ?></h3>
                    <h3 style="color: white">Mobile Number - <?php echo $data['mobile_no']; ?></h3>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-6">
                <a href="index.php" class="btn btn-primary btn-sm">Back To Dashboard</a>
                <button type="button" class="btn btn-outline-info btn-xs increase-brightness">
                    <span class="glyphicon glyphicon-plus"></span> +
                </button>
                <button type="button" class="btn btn-outline-info btn-xs decrease-brightness">
                    <span class="glyphicon glyphicon-minus"></span> -
                </button>
                <span id="pix"></span>
                <button type="button" class="btn btn-outline-info btn-sm" onclick="addsize()"><span class="glyphicon glyphicon-plus"></span></button>
                <button type="button" class="btn btn-outline-info btn-sm" onclick="subsize()"><span class="glyphicon glyphicon-minus"></span></button>
                <input type="range" min="1" max="1000" onchange="add(this.value)" value="" class="slider" id="myRange">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div id="imgDiv">
                    <div class="buttons">
                        <button type="button" class="zoom-out btn btn-default">
                            <span class="glyphicon glyphicon-minus"></span>
                        </button>
                        <button type="button" class="zoom-in btn btn-default">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                    </div>

                    <!-- Fingerprints in a horizontal layout -->
                    <div class="fingerprint-layout">
                        <img src="<?php echo $data['finger1']; ?>" alt="Fingerprint 1">
                        <img src="<?php echo $data['finger2']; ?>" alt="Fingerprint 2">
                        <img src="<?php echo $data['finger3']; ?>" alt="Fingerprint 3">
                        <img src="<?php echo $data['finger4']; ?>" alt="Fingerprint 4">
                        <img src="<?php echo $data['finger5']; ?>" alt="Fingerprint 5">
                    </div>
                </div>

                <div class="col-md-12" style="text-align:center;margin-top: 1em;margin-bottom: 1em;">
                    <button class="reset btn btn-primary">Reset Zoom</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {

        var bLevel = 1;
        $('.increase-brightness').click(function () {
            bLevel += 0.01;
            $(document).find(".img-responsive").css({"-webkit-filter": "brightness(" + bLevel + ")"})
        });

        $('.decrease-brightness').click(function () {
            bLevel -= 0.01;
            $(document).find(".img-responsive").css({"-webkit-filter": "brightness(" + bLevel + ")"})
        });

        var cLevel = 1;
        $('.increase-contrast').click(function () {
            cLevel += 0.01;
            $(document).find(".img-responsive").css({"-webkit-filter": "contrast(" + bLevel + ")"})
        });

        $('.decrease-contrast').click(function () {
            cLevel -= 0.01;
            $(document).find(".img-responsive").css({"-webkit-filter": "contrast(" + bLevel + ")"})
        });
    });


    (function () {
        var $section = $('div').first();
        $section.find('.panzoom').panzoom({
            $zoomIn: $section.find(".zoom-in"),
            $zoomOut: $section.find(".zoom-out"),
            $zoomRange: $section.find(".zoom-range"),
            $reset: $section.find(".reset")
        });

        $('#myCarousel').carousel({
            pause: true,
            interval: false
        });

    })();
</script>
<script>
    $(document).ready(function () {

        var bLevel = 1;
        $('.increase-brightness').click(function () {
            bLevel += 0.01;
            $(document).find(".img-responsive").css({"-webkit-filter": "brightness(" + bLevel + ")"})
        });

        $('.decrease-brightness').click(function () {
            bLevel -= 0.01;
            $(document).find(".img-responsive").css({"-webkit-filter": "brightness(" + bLevel + ")"})
        });

        var cLevel = 1;
        $('.increase-contrast').click(function () {
            cLevel += 0.01;
            $(document).find(".img-responsive").css({"-webkit-filter": "contrast(" + bLevel + ")"})
        });

        $('.decrease-contrast').click(function () {
            cLevel -= 0.01;
            $(document).find(".img-responsive").css({"-webkit-filter": "contrast(" + bLevel + ")"})
        });
    });

    function addsize() {
        var padding_size = $(document).find(".finger-size").css("padding");
        padding_size = padding_size.replace("px", "");
        padding_size--;
        console.log(padding_size + "px");
        $(document).find(".finger-size").css("padding", padding_size + "px")
    }

    function subsize() {
        var padding_size = $(document).find(".finger-size").css("padding");
        padding_size = padding_size.replace("px", "");
        padding_size++;
        console.log(padding_size + "px");
        $(document).find(".finger-size").css("padding", padding_size + "px")
    }

    function add(v) {
        let f = 1 + v / 100;

        $('img').css('filter', 'invert(1) saturate(0) brightness(1.8) contrast(' + f + ')')

    }

    (function () {
        var $section = $('div').first();
        $section.find('.panzoom').panzoom({
            $zoomIn: $section.find(".zoom-in"),
            $zoomOut: $section.find(".zoom-out"),
            $zoomRange: $section.find(".zoom-range"),
            $reset: $section.find(".reset")
        });

        $('#myCarousel').carousel({
            pause: true,
            interval: false
        });

    })();
</script>
</body>

</html>
