<?php
ini_set("display_errors", 1);
ini_set("display_startup_errors", 1);
error_reporting(E_ALL);

include('../includes/config.php');

if(isset($_GET['id']) && $_GET['id'] != NULL){
    $id = base64_decode($_GET['id']);
    $res = mysqli_query($conn,"SELECT * FROM `dob` WHERE id='$id'");
    $data = mysqli_fetch_assoc($res);
}

// फिंगर इमेजेस सेट करें (पहले कोड के अनुसार)
$F = [
    $data["finger1"] ?: "no-image.png",
    $data["finger2"] ?: "no-image.png",
    $data["finger3"] ?: "no-image.png",
    $data["finger4"] ?: "no-image.png",
    $data["finger5"] ?: "no-image.png"
];

$f1 = $F[0];
$f2 = $F[1];
$f3 = $F[2];
$f4 = $F[3];
$f5 = $F[4];

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

<head>
    <title>Aadhar Correction</title>
    <script src="https://kit.fontawesome.com/40b99cb665.js" crossorigin="anonymous"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Custom fonts for this template -->


    <!-- Custom styles for this template -->


    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js.download"></script>


    <link href="css/all.min.css" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
    <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>

    <style>
    @media (min-width: 768px) {}

    .center_text {
        text-decoration: underline;
        text-align: center;
    }

    .pro_custem {

        display: none;
    }





    @keyframes loading-1 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
    }

    @keyframes loading-2 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(144deg);
            transform: rotate(144deg);
        }
    }

    @keyframes loading-3 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }
    }

    @keyframes loading-4 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(36deg);
            transform: rotate(36deg);
        }
    }

    @keyframes loading-5 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(126deg);
            transform: rotate(126deg);
        }
    }

    @media only screen and (max-width: 990px) {
        .progress {
            margin-bottom: 20px;
        }
    }
    .rounded mx-auto d-block{
        width: 96px;
    }

    .billing_list {
        flex: 1;
        justify-content: center;
        align-content: center;
        align-items: center;
        padding: 9px;
    }

    .check {
        background-color: #4CAF50;
        color: #e9d3d3;
    }

    .check a {
        color: white;
    }

    .ban a {
        color: white;
    }

    .ban {
        background-color: #b4372e;
    }

    .small_chip {
        font-size: 10px;
        padding-left: 4px;
        padding-right: 4px;
        border-radius: 5px;
        flex: 1;

    }
    </style>
    <style>
    .alert_g {
        position: fixed;
        top: 0px;
        z-index: 9999999999;
    }
    </style>

    <!-- पहले कोड का CSS (बिना बदले) -->
    <style>
    :root {
        --fp-bright: 1;
        --fp-con: 1;
        --fp-size: 180px;
        --fp-zoom: 1;
        --fp-filter: grayscale(1) contrast(1.6);
        --bg: #000;
        --text: #fff;
        --bg-dark:#020617;
        --bg-light:#f8fafc;
        --text-dark:#e5e7eb;
        --text-light:#020617;
    }

    .light{
        --bg:#fff;
        --text:#000;
    }

    body{
        background:var(--bg-dark);
        color:var(--text-dark);
        transition:all .3s ease;
        width:auto;
    }

    body.light{
        background:var(--bg-light);
        color:var(--text-light);
    }

    #finalPreview, .your-target-element {
        filter: brightness(var(--fp-bright)) contrast(var(--fp-con));
        transition: filter 0s linear !important;
    }

    .finger-area img {
        transform: scaleX(-1) scale(var(--fp-zoom)) !important;
    }

    .editor-box{
        width:100%;
        height:auto;
        min-height:700px;
        background:var(--bg);
        border-radius:25px;
        overflow:hidden;
        position:relative;
    }

    /* TOP BAR */
    .top-bar{
        display:flex;
        gap:10px;
        overflow-x:auto;
        background:#f6f6f6;
        padding:8px;
    }
    .top-bar button{
        background:#ddd;
        border:none;
        padding:6px 15px;
        border-radius:8px;
        cursor:pointer;
        white-space:nowrap;
    }
    #themeBtn{ background:#0099ff; color:#fff; }

    /* TOP CONTROLS */
    .top-controls{
        background:#eee;
        padding:7px;
        display:flex;
        gap:20px;
        justify-content:center;
        position: relative;
        z-index: 10;
        background: #e5e5e5 !important;
    }

    /* SIDE SLIDERS */
    .left-slider, .right-slider{
        position:absolute;
        top:35%;
        width:50px;
        height:45%;
        display:flex;
        align-items:center;
        justify-content:center;
        z-index:999;
    }
    .left-slider{ left:0; }
    .right-slider{ right:0; }

    .left-slider input,
    .right-slider input{
        transform:rotate(-90deg);
        width:230px;
    }

    .bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #000000cc;
        padding: 8px 5px;
        display: flex;
        gap: 10px;
        overflow-x: auto;
        z-index: 999999;
        backdrop-filter: blur(8px);
    }

    /* thumbnails */
    .bottom-bar .thumb {
        min-width: 60px;
        height: 75px;
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid #444;
        flex-shrink: 0;
        display:flex;
        align-items:center;
        gap:6px;
        cursor:pointer;
        padding:6px 10px;
        border-radius:10px;
        background:rgba(255,255,255,.08);
        position:relative;
    }

    .bottom-bar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .f-title {
        position: absolute;
        bottom: 2px;
        left: 2px;
        background: rgba(0,0,0,0.55);
        color: #fff;
        font-size: 10px;
        padding: 1px 3px;
        border-radius: 3px;
    }

    .top-controls {
        color: #222 !important;
        font-weight: bold;
        font-size: 14px;
    }

    .slider-val{
        position: absolute;
        bottom: -25px;
        font-size: 13px;
        color: var(--text);
        font-weight: bold;
        width: 100%;
        text-align: center;
        pointer-events: none;
    }

    .finger-area {
        position: relative;
        z-index: 1;
    }

    .top-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #e5e5e5;
        padding: 6px 8px;
        border-radius: 6px;
        gap: 12px;
        margin-bottom: 6px;
    }

    .tc-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
    }

    .tc-box label,
    .tc-box span {
        font-size: 11px;
        font-weight: bold;
        color: #000;
        margin-bottom: 1px;
    }

    .tc-box input[type="range"] {
        width: 100%;
        height: 6px;
    }

    .tc-box input[type="range"] {
        width: 90px;
    }

    .tc-box span {
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }

    /* GRID */
    .finger-area{
        margin-top:0px;
        width:100%;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:0px;
        justify-items:center;
        padding:0px;
        touch-action:none;
    }

    /* ALL images */
    .finger-area img{
        width:var(--fp-size);
        height:var(--fp-size);
        transform:scale(var(--fp-zoom));
        border-radius:0px;
        padding:0;
        filter:
            brightness(var(--fp-bright))
            contrast(var(--fp-con))
            var(--fp-filter);
        transition:0.15s;
        touch-action:none;
        position: relative;
    }

    /* LAST Finger (center) */
    .finger-area img:last-child{
        grid-column:span 2;
        justify-self:center;
    }

    .thumb img{
        width:26px;
        height:26px;
    }
    .f-title{
        font-size:12px;
    }

    /* कैरोसेल को हटाने के लिए */
    .carousel-inner {
        display: none;
    }
    </style>
</head>

<body id="page-top" class="sidebar-toggled light" oncontextmenu="return false">
    <style>
    .alert_g {
        position: fixed;
        top: 0px;
        z-index: 9999999999;
    }
    </style>
   
    
                   

                 
                <!-- Begin Page Content -->
                <div class="container-fluid" id="wark_area">
                    <!-- पहले कोड का एडिटर बॉक्स -->
                    <div class="editor-box">
                        <!-- TOP CONTROLS -->
                        <div class="top-controls" style="
                            display:flex;
                            align-items:center;
                            gap:16px;
                            padding:12px 16px;
                            background:#e5e5e5;
                            border-radius:12px;
                            flex-wrap:wrap;
                        ">
                            <!-- ✔ APPLY BUTTON -->
                            <button class="btn btn-primary" onclick="applySharpenToAll()"
                                style="padding:6px 16px;font-size:22px;">✔</button>

                           
                           

                            <!-- ZOOM -->
                            <div style="display:flex;align-items:center;gap:8px;font-weight:bold;">
                                <button id="zoomMinus" style="font-size:22px;">-</button>
                                <span id="zoomVal">52%</span>
                                <button id="zoomPlus" style="font-size:22px;">+</button>
                            </div>
                            
                           
<?php if (!empty($data['name']) || !empty($data[''])): ?>
    <span style="color:green;font-weight:bold;font-size:14px;">
        Name: <?php echo htmlspecialchars($data['name']); ?>
        <br>
        Aadhaar No: <?php echo htmlspecialchars($data['aadhaar_no']); ?>
    </span>
<?php endif; ?>

                            <!-- APPLY/REMOVE SELECTION -->
                            <button id="removeSelectBtn"
                                style="
                                margin-left:auto;
                                padding:6px 12px;
                                background:#16a34a;
                                color:#fff;
                                border:none;
                                border-radius:6px;
                                font-size:12px;
                                font-weight:600;">
                                Apply
                            </button>

                            <!-- 🔥 BLINK BUTTONS -->
                            <div style="display:flex; gap:8px; margin-top:8px;">
                                <button id="blinkFast">FAST</button>
                                <button id="blinkNormal">NORMAL</button>
                                <button id="blinkSlow">SLOW</button>
                            </div>
                            
                            <!-- OPACITY BUTTONS -->
                            <div style="margin-top:6px; display:flex; gap:6px;">
                                <button id="op90">90%</button>
                                <button id="op80">80%</button>
                                <button id="op70">70%</button>
                            </div>
                        </div>

                        <!-- LEFT BRIGHTNESS SLIDER -->
                        <div class="left-slider">
                            <input id="bright" type="range" min="-200" max="400" value="400">
                            <span id="brightVal" class="slider-val">0%</span>
                        </div>

                        <!-- RIGHT CONTRAST SLIDER -->
                        <div class="right-slider">
                            <input id="contrast" type="range" min="-170" max="400" value="400">
                            <span id="contrastVal" class="slider-val">0%</span>
                        </div>

                        <!-- FINGER PRINTS GRID -->
                        <div class="finger-area">
                            <img src="<?= $f1 ?>">
                            <img src="<?= $f2 ?>">
                            <img src="<?= $f3 ?>">
                            <img src="<?= $f4 ?>">
                            <img src="<?= $f5 ?>">
                        </div>

                        <!-- FILTER PREVIEWS BOTTOM BAR -->
                        <div class="bottom-bar">
                            <div class="thumb" onclick="setFilter('bw')">
                                <img src="<?= $f1 ?>">
                                <span class="f-title">B&W</span>
                            </div>

                            <div class="thumb" onclick="setFilter('invert')">
                                <img src="<?= $f1 ?>">
                                <span class="f-title">Invert</span>
                            </div>

                            <div class="thumb" onclick="setFilter('bw2')">
                                <img src="<?= $f1 ?>">
                                <span class="f-title">B&W2</span>
                            </div>

                            <div class="thumb" id="themeBtn" onclick="toggleTheme()">
                                <img src="<?= $f1 ?>">
                                <span class="f-title">Theme</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.container-fluid -->
            </div><!-- End of Main Content -->
            <!-- Footer -->
            <footer class="sticky-footer bg-white">
                <div class="container my-auto">
                    <div class="copyright text-center my-auto">

                    </div>
                </div>
            </footer>
            <!-- End of Footer -->
        </div>
        <!-- End of Content Wrapper -->

    </div>
    <!-- End of Page Wrapper -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>

    <!-- Logout Modal-->

    <!-- progress bar  -->
    <div class="container" style="    display: none;">
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="progress blue">
                    <span class="progress-left">
                        <span class="progress-bar"></span>
                    </span>
                    <span class="progress-right">
                        <span class="progress-bar"></span>
                    </span>
                    <div class="progress-value">70%</div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="progress yellow">
                    <span class="progress-left">
                        <span class="progress-bar"></span>
                    </span>
                    <span class="progress-right">
                        <span class="progress-bar"></span>
                    </span>
                    <div class="progress-value">65%</div>
                </div>
            </div>
        </div>
    </div>
    <!-- end progress bar  -->

    <!-- Start progreesss passer -->




    <!-- End pagerese -->

    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">�</span>
                    </button>
                </div>
                <!-- containt modal -->
                <div class="modal-body">Are You Sure To 'Logout'?</div>

                <!--  End containt modal  -->

                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">No</button>
                    <a class="btn btn-primary" href="pendingwork.php">Yes</a>
                </div>
            </div>
        </div>
    </div>


    <!-- End Logout Modal-->

    <!-- Bootstrap core JavaScript-->
    <script src="js/jquery.min.js.download"></script>
    <script src="js/bootstrap.bundle.min.js.download"></script>

    <!-- Core plugin JavaScript-->
    <script src="js/jquery.easing.min.js.download"></script>

    <!-- Custom scripts for all pages-->
    <script src="js/sb-admin-2.min.js.download"></script>

    <!-- Page level plugins -->
    <script src="js/Chart.min.js.download"></script>

    <!-- Page level custom scripts -->
    <script src="js/chart-area-demo.js.download"></script>
    <script src="js/chart-pie-demo.js.download"></script>

    <script type="text/javascript" language="javascript"
        src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js.download"></script>
    <script type="text/javascript" language="javascript"
        src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js.download"></script>
    <script type="text/javascript" language="javascript"
        src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js.download"></script>
    <script type="text/javascript" language="javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js.download"></script>
    <script type="text/javascript" language="javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js.download"></script>
    <script type="text/javascript" language="javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js.download"></script>
    <script type="text/javascript" language="javascript"
        src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js.download"></script>
    <script type="text/javascript" language="javascript"
        src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js.download"></script>

    <!-- पहले कोड का सारा JavaScript (बिना बदले) -->
    <script>
    // =================== SELECTION LOCK ===================
    document.addEventListener('DOMContentLoaded', function () {
        let selectionLocked = true;
        let skipGuard = false;

        const btn  = document.getElementById('removeSelectBtn');
        const area = document.querySelector('.finger-area');

        if (!btn || !area) return;

        function selectFingerArea() {
            const sel = window.getSelection();
            const range = document.createRange();
            range.selectNodeContents(area);
            sel.removeAllRanges();
            sel.addRange(range);
        }

        /* ===== INITIAL AUTO APPLY ===== */
        selectFingerArea();
        btn.innerText = 'Remove';
        btn.style.background = '#dc2626';

        /* ===== TOGGLE BUTTON ===== */
        btn.addEventListener('click', function () {
            if (selectionLocked) {
                // ---- REMOVE ----
                selectionLocked = false;
                skipGuard = true;

                window.getSelection().removeAllRanges();

                btn.innerText = 'Apply';
                btn.style.background = '#16a34a';

                setTimeout(() => skipGuard = false, 50);

            } else {
                // ---- APPLY ----
                selectionLocked = true;
                selectFingerArea();

                btn.innerText = 'Remove';
                btn.style.background = '#dc2626';
            }
        });

        /* ===== SELECTION GUARD ===== */
        document.addEventListener('selectionchange', function () {
            if (!selectionLocked || skipGuard) return;

            const sel = window.getSelection();
            if (!sel.rangeCount) {
                selectFingerArea();
                return;
            }

            const range = sel.getRangeAt(0);
            if (!area.contains(range.commonAncestorContainer)) {
                selectFingerArea();
            }
        });
    });

    // =================== ZOOM CONTROL ===================
    (function(){
        const root   = document.documentElement;
        const output = document.getElementById("zoomVal");
        const btnPlus  = document.getElementById("zoomPlus");
        const btnMinus = document.getElementById("zoomMinus");

        let zoom = 52;
        const min = 30;
        const max = 200;

        function apply(){
            output.innerText = zoom + "%";
            root.style.setProperty("--fp-zoom", zoom / 100);
        }

        btnPlus.addEventListener("click", () => {
            if (zoom < max) {
                zoom += 5;
                apply();
            }
        });

        btnMinus.addEventListener("click", () => {
            if (zoom > min) {
                zoom -= 5;
                apply();
            }
        });

        apply();
    })();

    // =================== DEFAULT SETTINGS ===================
    document.addEventListener("DOMContentLoaded", function () {
        document.documentElement.classList.add("dark-theme");
        
        if (typeof toggleTheme === "function") {
            toggleTheme();
        }

        if (typeof setFilter === "function") {
            setFilter("invert");
        }
    });

    // =================== DRAG AND DROP ===================
    let area = document.querySelector(".finger-area");
    let images = document.querySelectorAll(".finger-area img");

    let blockDrag = false;
    let imgDrag = false;

    let b_startX = 0, b_startY = 0;
    let b_moveX = 0, b_moveY = 0;

    let i_startX = 0, i_startY = 0;

    area.addEventListener("pointerdown", e => {
        if (e.target.tagName === "IMG") return;

        blockDrag = true;
        area.setPointerCapture(e.pointerId);

        b_startX = e.clientX - b_moveX;
        b_startY = e.clientY - b_moveY;

        area.style.transition = "0s";
    });

    area.addEventListener("pointermove", e => {
        if (!blockDrag) return;

        b_moveX = e.clientX - b_startX;
        b_moveY = e.clientY - b_startY;

        area.style.transform = `translate(${b_moveX}px, ${b_moveY}px)`;
    });

    area.addEventListener("pointerup", e => {
        blockDrag = false;
        area.style.transition = "0.2s";
    });

    images.forEach(img => {
        let moveX = 0, moveY = 0;

        img.addEventListener("pointerdown", e => {
            imgDrag = true;
            img.setPointerCapture(e.pointerId);

            i_startX = e.clientX - moveX;
            i_startY = e.clientY - moveY;

            img.style.transition = "0s";
            e.stopPropagation();
        });

        img.addEventListener("pointermove", e => {
            if (!imgDrag) return;

            moveX = e.clientX - i_startX;
            moveY = e.clientY - i_startY;

            img.style.transform =
               `translate(${moveX}px, ${moveY}px) scale(var(--fp-zoom))`;
        });

        img.addEventListener("pointerup", e => {
            imgDrag = false;
            img.style.transition = "0.2s";
        });
    });

    // =================== SHARPEN EFFECT ===================
    let intensity = 1.0;
    let radius = 5;
    let originalSources = [];

    window.onload = function () {
        const imgs = document.querySelectorAll(".finger-area img");
        imgs.forEach(img => originalSources.push(img.src));
    };

    function applySharpenToAll() {
        const imgs = document.querySelectorAll(".finger-area img");

        imgs.forEach(img => {
            let c = document.createElement("canvas");
            let ctx = c.getContext("2d");

            c.width = img.naturalWidth;
            c.height = img.naturalHeight;

            ctx.drawImage(img, 0, 0);

            let imgData = ctx.getImageData(0, 0, c.width, c.height);
            let d = imgData.data;
            let copy = new Uint8ClampedArray(d);

            let r = radius;

            for (let y = r; y < c.height - r; y++) {
                for (let x = r; x < c.width - r; x++) {
                    let i = (y * c.width + x) * 4;

                    for (let k = 0; k < 3; k++) {
                        let val =
                            copy[i + k] * (1 + intensity * 4)
                            - copy[((y - r) * c.width + x) * 4 + k] * intensity
                            - copy[((y + r) * c.width + x) * 4 + k] * intensity
                            - copy[(y * c.width + (x - r)) * 4 + k] * intensity
                            - copy[(y * c.width + (x + r)) * 4 + k] * intensity;

                        d[i + k] = Math.max(0, Math.min(255, val));
                    }
                }
            }

            ctx.putImageData(imgData, 0, 0);
            img.src = c.toDataURL();
        });
    }

    // =================== THEME SWITCHER ===================
    (function(){
        const btn = document.getElementById("themeBtn");
        if(!btn) return;

        document.body.classList.remove("light");

        btn.addEventListener("click", () => {
            document.body.classList.toggle("light");
        });
    })();

    // =================== FILTER ENGINE ===================
    (function(){
        const root = document.documentElement;

        const FILTERS = {
            bw:      "grayscale(1) contrast(1.6)",
            bw2:     "grayscale(1) contrast(2) brightness(.9)",
            invert:  "invert(1)",
            light:   "brightness(1.28) contrast(1.1)",
            spark:   "brightness(1.1) contrast(1.7) saturate(1.3)",
            polish:  "contrast(1.6) brightness(1.1)",
            none:    "brightness(1) contrast(1)"
        };

        window.setFilter = function(type){
            if(!FILTERS[type]) return;
            root.style.setProperty("--fp-filter", FILTERS[type]);
        };
    })();

    // =================== BRIGHTNESS CONTROL ===================
    (function UltraBrightness(){
        const root = document.documentElement;

        function init() {
            const slider = document.getElementById("bright");
            const output = document.getElementById("brightVal");
            if(!slider || !output){ return setTimeout(init, 50); }

            let lastValue = null;

            function apply(v){
                root.style.setProperty("--fp-bright", v/100);
                output.textContent = v + "%";
            }

            function loop(){
                const v = slider.value;
                if(v !== lastValue){
                    lastValue = v;
                    apply(v);
                }
                requestAnimationFrame(loop);
            }

            slider.addEventListener("input", ()=>apply(slider.value));
            slider.addEventListener("change", ()=>apply(slider.value));
            slider.addEventListener("mousemove", ()=>apply(slider.value));
            slider.addEventListener("touchmove", ()=>apply(slider.value));

            setInterval(()=>apply(slider.value), 150);

            apply(slider.value);
            loop();
        }
        init();
    })();

    // =================== CONTRAST CONTROL ===================
    (function UltraContrast(){
        const root = document.documentElement;

        function init() {
            const slider = document.getElementById("contrast");
            const output = document.getElementById("contrastVal");
            if(!slider || !output){ return setTimeout(init, 50); }

            let lastValue = null;

            function apply(v){
                root.style.setProperty("--fp-con", v/100);
                output.textContent = v + "%";
            }

            function loop(){
                const v = slider.value;
                if(v !== lastValue){
                    lastValue = v;
                    apply(v);
                }
                requestAnimationFrame(loop);
            }

            slider.addEventListener("input", ()=>apply(slider.value));
            slider.addEventListener("change", ()=>apply(slider.value));
            slider.addEventListener("mousemove", ()=>apply(slider.value));
            slider.addEventListener("touchmove", ()=>apply(slider.value));

            setInterval(()=>apply(slider.value), 150);

            apply(slider.value);
            loop();
        }
        init();
    })();

    // =================== BLINK EFFECT ===================
    (function BlinkFingerArea(){
        let intervalId = null;
        let speed = 250;
        let lowOpacity = 0.9;
        let high = true;

        function startBlink(imgs, slider){
            if(intervalId) clearInterval(intervalId);

            intervalId = setInterval(() => {
                const v = Number(slider.value);

                if(v >= 300 && v <= 400){
                    high = !high;
                    imgs.forEach(img => {
                        img.style.opacity = high ? "1" : String(lowOpacity);
                    });
                } else {
                    imgs.forEach(img => {
                        img.style.opacity = "1";
                    });
                }

            }, speed);
        }

        function init(){
            const imgs   = document.querySelectorAll(".finger-area img");
            const slider = document.getElementById("contrast");

            if(!imgs.length || !slider){
                return setTimeout(init, 50);
            }

            startBlink(imgs, slider);

            document.getElementById("blinkFast")?.addEventListener("click", () => {
                speed = 120; startBlink(imgs, slider);
            });
            document.getElementById("blinkNormal")?.addEventListener("click", () => {
                speed = 250; startBlink(imgs, slider);
            });
            document.getElementById("blinkSlow")?.addEventListener("click", () => {
                speed = 400; startBlink(imgs, slider);
            });

            document.getElementById("op90")?.addEventListener("click", () => {
                lowOpacity = 0.9;
            });
            document.getElementById("op80")?.addEventListener("click", () => {
                lowOpacity = 0.8;
            });
            document.getElementById("op70")?.addEventListener("click", () => {
                lowOpacity = 0.7;
            });
        }

        init();
    })();

    // =================== OLD FUNCTIONS (मूल कोड से) ===================
    $(document).click(function(e) {
        if (!$(e.target).is('.collapse')) {
            $('.collapse').collapse('hide');
        }
    });

    function liveLoad(pageurl, type, parameters) {
        console.log(pageurl);
        $(".pro_custem").slideToggle();

        $('.navbar-nav').toggleClass("sidebar-toggled");

        $.ajax({
            url: pageurl,
            type: 'Post',
            data: {
                p: 'k'
            },
            success: function(data) {
                $(".pro_custem").slideToggle();
                $('#wark_area').html(data);
            },
            error: function(e) {
                console.log(e.responseText);
            }
        });
    }

    $(document).ready(function() {
        $('#exampled').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
    });
    </script>
    
</body>

</html>