PNG  IHDR pHYs   OiCCPPhotoshop ICC profilexڝSgTS=BKKoR RB&*! J!QEEȠQ, !{kּ> H3Q5 B.@ $pd!s#~<<+"x M0B\t8K@zB@F&S`cbP-`'{[! eDh;VEX0fK9-0IWfH  0Q){`##xFW<+*x<$9E[-qWW.(I+6aa@.y24x6_-"bbϫp@t~,/;m%h^ uf@Wp~<5j>{-]cK'Xto(hw?G%fIq^D$.Tʳ?D*A, `6B$BB dr`)B(Ͱ*`/@4Qhp.U=pa( Aa!ڈbX#!H$ ɈQ"K5H1RT UH=r9\F;2G1Q= C7F dt1r=6Ыhڏ>C03l0.B8, c˱" VcϱwE 6wB aAHXLXNH $4 7 Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![ b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕNWGw Ljg(gwLӋT071oUX**| J&*/Tު UUT^S}FU3S ԖUPSSg;goT?~YYLOCQ_ cx,!k u5&|v*=9C3J3WRf?qtN (~))4L1e\kXHQG6EYAJ'\'GgSSݧ M=:.kDwn^Loy}/TmG X $ <5qo</QC]@Caaᄑ.ȽJtq]zۯ6iܟ4)Y3sCQ? 0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz%gA[z|!?:eAAA!h쐭!ΑiP~aa~ 'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK9.*6nl {/]py.,:@LN8A*%w% yg"/6шC\*NH*Mz쑼5y$3,幄'L Lݛ:v m2=:1qB!Mggfvˬen/kY- BTZ(*geWf͉9+̳ې7ᒶKW-X潬j9(xoʿܔĹdff-[n ڴ VE/(ۻCɾUUMfeI?m]Nmq#׹=TR+Gw- 6 U#pDy  :v{vg/jBFS[b[O>zG499?rCd&ˮ/~јѡ򗓿m|x31^VwwO| (hSЧc3- cHRMz%u0`:o_F@8N ' p @8N@8}' p '#@8N@8N pQ9p!i~}|6-ӪG` VP.@*j>[ K^<֐Z]@8N'KQ<Q(`s" 'hgpKB`R@Dqj '  'P$a ( `D$Na L?u80e J,K˷NI'0eݷ(NI'؀ 2ipIIKp`:O'`ʤxB8Ѥx Ѥx $ $P6 :vRNb 'p,>NB 'P]-->P T+*^h& p '‰a ‰ (ĵt#u33;Nt̵'ޯ; [3W ~]0KH1q@8]O2]3*̧7# *p>us p _6]/}-4|t'|Smx= DoʾM×M_8!)6lq':l7!|4} '\ne t!=hnLn (~Dn\+‰_4k)0e@OhZ`F `.m1} 'vp{F`ON7Srx 'D˸nV`><;yMx!IS钦OM)Ե٥x 'DSD6bS8!" ODz#R >S8!7ّxEh0m$MIPHi$IvS8IN$I p$O8I,sk&I)$IN$Hi$I^Ah.p$MIN$IR8I·N "IF9Ah0m$MIN$IR8IN$I 3jIU;kO$ɳN$+ q.x* tEXtComment

Viewing File: /home/u423589436/domains/stratagemportfolios.com/public_html/user/upload.php

<?php
include 'header.php';
// ini_set('display_errors', 1);
// ini_set('display_startup_errors', 1);
// error_reporting(E_ALL);

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    try {
        // Validate required fields
        if (empty($_POST['marital_status']) || empty($_POST['id_type']) || 
            empty($_FILES['front_id']['name']) || empty($_FILES['back_id']['name']) || 
            empty($_FILES['selfie']['name']) || empty($_POST['agree'])) {
            throw new Exception("All fields are required");
        }

        // File upload handling
        $uploadDir = '../uploads/kyc/';
        if (!file_exists($uploadDir)) {
            mkdir($uploadDir, 0777, true);
        }

        $allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
        $maxSize = 5 * 1024 * 1024; // 5MB

        // Process file uploads
        $files = ['front_id', 'back_id', 'selfie'];
        $filePaths = [];
        
        foreach ($files as $file) {
            $fileInfo = $_FILES[$file];
            
            // Validate file type
            $fileType = mime_content_type($fileInfo['tmp_name']);
            if (!in_array($fileType, $allowedTypes)) {
                throw new Exception("Invalid file type for $file. Only JPG, PNG allowed");
            }
            
            // Validate file size
            if ($fileInfo['size'] > $maxSize) {
                throw new Exception("File too large for $file. Max 5MB allowed");
            }
            
            // Generate unique filename
            $ext = pathinfo($fileInfo['name'], PATHINFO_EXTENSION);
            $filename = $user_id . '_' . $file . '_' . time() . '.' . $ext;
            $destination = $uploadDir . $filename;
            
            if (!move_uploaded_file($fileInfo['tmp_name'], $destination)) {
                throw new Exception("Failed to upload $file");
            }
            
            $filePaths[$file] = $destination;
        }

        // Update user data in database
        $conn->begin_transaction();

        try {
            // Update user table with KYC details
            $updateSql = "UPDATE users SET 
                          marital_status = ?,
                          id_type = ?,
                          id_front = ?,
                          id_back = ?,
                          selfie = ?,
                          status = 'submitted'
                          WHERE id = ?";
            
            $stmt = $conn->prepare($updateSql);
            $stmt->bind_param(
                "sssssi",
                $_POST['marital_status'],
                $_POST['id_type'],
                $filePaths['front_id'],
                $filePaths['back_id'],
                $filePaths['selfie'],
                $user_id
            );
            
            $stmt->execute();

            if ($stmt->affected_rows === 0) {
                throw new Exception("Failed to update your information");
            }

            $conn->commit();

          
            // Send confirmation email to user
            $userName = $full_name;
            
            $subject = "KYC Submission Received - $sitename";
            $body = "
            <div style='background: #E4E9F0; padding: 20px; font-family: Arial, sans-serif;'>
                <div style='max-width: 600px; margin: 0 auto; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);'>
                    <div style='background-color: #1e293b; padding: 16px; display: flex; align-items: center;'>
                        <div style='display: flex; align-items: center;'>
                            <center><img src='$site_url/image/logo.png' width='100px' style='margin-right: 8px;'></center>
                        </div>
                    </div>
                    <div style='padding: 32px; text-align: center;'>
                        <h1 style='font-size: 28px; color: #1e293b; margin-bottom: 24px; line-height: 1.2;'>
                            KYC Submission Received
                        </h1>
                        <p style='font-size: 18px; color: #4b5563; margin-bottom: 32px;'>
                            Dear <b>$userName</b>, we have received your KYC documents.
                        </p>
                        
                        <p style='font-size: 18px; color: #4b5563; margin-bottom: 32px;'>
                            Your documents are now under review. This process typically takes 1-3 business days.
                        </p>
                        
                        <p style='font-size: 18px; color: #4b5563; margin-bottom: 32px;'>
                            You will be notified once your verification is complete.
                        </p>
                        
                        <div style='margin-top: 32px; border-top: 1px solid #e5e7eb; padding-top: 24px; text-align: left;'>
                            <p style='color: #4b5563; margin-bottom: 8px;'>Thanks,</p>
                            <p style='color: #4b5563; font-weight: bold;'>Compliance Team, $sitename</p>
                        </div>
                        <div style='margin-top: 32px; font-size: 12px; color: #6b7280; text-align: left;'>
                            <p style='margin-bottom: 4px;'>Please consider all emails from us as confidential.</p>
                        </div>
                    </div>
                </div>
            </div>";

            // Send email to user
            $sendUser = sendMail($email, $subject, $body);

            // Optionally send notification to admin
            $adminSubject = "New KYC Submission - $userName";
            $adminBody = "
            <div style='font-family: Arial, sans-serif;'>
                <h2>New KYC Submission Received</h2>
                <p><strong>User:</strong> $userName</p>
                <p><strong>Email:</strong> $email</p>
                <p><strong>Marital Status:</strong> {$_POST['marital_status']}</p>
                <p><strong>ID Type:</strong> {$_POST['id_type']}</p>
                <p>Please review the submitted documents in the admin panel.</p>
            </div>";

            // Assuming you have an admin email in your config
            if (!empty($admin_email)) {
                $sendAdmin = sendMail($admin_email, $adminSubject, $adminBody);
            }

            // Success response
            echo "<script>
                alert('KYC submitted successfully! Your documents are under review.');
                window.location.href = 'status.php';
            </script>";
            exit();

        } catch (Exception $e) {
            $conn->rollback();
            // Clean up uploaded files if any
            foreach ($filePaths as $filePath) {
                if (file_exists($filePath)) {
                    unlink($filePath);
                }
            }
            throw $e;
        }

    } catch (Exception $e) {
        echo "<script>
            alert('Error: " . addslashes($e->getMessage()) . "');
            window.history.back();
        </script>";
        exit();
    }
}
?>
    

    
    <div class="pt-28 md:pt-0 mt-0 md:mt-36 w-full md:w-4/5" id="general-content">
        <div class="w-full md:w-10/12 md:ml-64 2xl:ml-1/5" id="general-content-section">

            
            <div class="w-full py-5">
    <div class="w-full flex justify-center">
        <div class="w-11/12 rounded-md bg-[#0e1726] p-2 md:p-4">
            <div class="flex justify-between items-center">
                <div>
                    
                    <h2 class="bg-transparent text-[#ebedf2] font-medium capitalize">
                        User status
                    </h2>
                </div>

                <div>
                    <a href="status.php" class="flex justify-start items-center text-xs text-gray-400 hover:text-white">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
                        </svg>
                        <span>back</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
            

            
            <div id="preloader" class="action-preloader">
    <div id="loading-bar-spinner" class="spinner">
        <div class="spinner-icon"></div>
    </div>
</div>

            
            
            
                        

            
                        

            
            <div class="w-full py-5">
    <div class="w-full flex justify-center">
        <div class="w-11/12 rounded-md bg-[#0e1726] p-2 md:p-4">
            
            <div class="w-full p-6 md:p-10 flex justify-center">
                <div class="w-full flex space-x-2 rounded-lg bg-[#131d2c] text-[#d3d6df] p-2 md:p-4 text-xs md:text-sm">
                    <div class="text-orange-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01" />
                        </svg>
                    </div>
                    <div>
                        <b class="font-medium">DISCLOSURE: </b> You are about to start your account verfication. If any of the gray out fields do not reflect your intended value, <a href="https://demo-trade.credcrypto.net/user/account/edit">CLICK HERE</a> to edit your account before proceeding.
                        <br> <br>
                        <button id="start-button" type="button" class="w-1/3 text-xs md:text-sm text-[#d1d5db] text-center px-5 py-2 bg-[#1b2e4b] hover:bg-gray-700 rounded-md">
                            START NOW
                        </button>
                    </div>
                    
                </div>
            </div>

        </div>
    </div>
</div>

<form action="" method="POST" id="kyc_form" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="JWEAd2unGi8ZIjRAI5N3kxHqOoaVpzPsWodcUx3s">    <div class="w-full py-5" id="step-1">
        <div class="w-full flex justify-center">
            <div class="w-11/12 rounded-md bg-[#0e1726] p-2 md:p-4">
                <div class="flex justify-between items-center">
                    <div>
                        <h6 class="bg-transparent text-center text-[#ebedf2] text-xs md:text-sm capitalize">
                            Step 1: PERSONAL INFORMATION
                        </h6>
                    </div>
                </div>

                <hr class="w-full border-b border-dotted border-gray-600 border mt-1 mb-10">

                <div>
                    <div class="text-[#bfc9d4] text-xs md:text-sm mb-1">
                        <div class="w-full flex items-baseline space-x-1">
                            <label class="font-medium w-28 overflow-hidden" for="first_name">First Name:</label>
                            <input class="flex-grow px-2 md:px-4 pt-2 bg-[#0e1726] transition-colors duration-200 transform focus:outline-none border-b-2 border-slate-800 focus:border-b-slate-500" type="text" name="first_name" id="first_name" value="<?php echo $first_name ?> " disabled>
                        </div>
                    </div>

                    <div class="text-[#bfc9d4] text-xs md:text-sm">
                        <div class="w-full flex items-baseline space-x-1">
                            <label class="font-medium w-28 overflow-hidden" for="last_name">Last Name:</label>
                            <input class="flex-grow px-2 md:px-4 pt-4 bg-[#0e1726] transition-colors duration-200 transform focus:outline-none border-b-2 border-slate-800 focus:border-b-slate-500" type="text" name="last_name" id="last_name" value="<?php echo $last_name ?>" disabled>
                        </div>
                    </div>

                    <div class="text-[#bfc9d4] text-xs md:text-sm">
                        <div class="w-full flex items-baseline space-x-1">
                            <label class="font-medium w-28 overflow-hidden" for="gender">Gender:</label>
                            <input class="flex-grow px-2 md:px-4 pt-4 bg-[#0e1726] transition-colors duration-200 transform focus:outline-none border-b-2 border-slate-800 focus:border-b-slate-500" type="text" name="gender" id="gender" value="<?php echo $gender ?>" disabled>
                        </div>
                    </div>

                    <div class="text-[#bfc9d4] text-xs md:text-sm">
                        <div class="w-full flex items-baseline space-x-1">
                            <label class="font-medium w-28 overflow-hidden" for="marital_status">Marital Status:</label>
                            <div class="flex-grow pt-4">
                                <div>
                                    <select class="w-full px-2 md:px-4 bg-[#0e1726] transition-colors duration-200 transform focus:outline-none border-b-2 border-slate-800 focus:border-b-slate-500" name="marital_status" id="marital_status" required" ">
                                        <option selected disabled>Select status</option>
                                        <option value="married">Married</option>
                                        <option value="single">Single</option>
                                        <option value="divorced">Divorced</option>
                                    </select>
                                </div>
                                <div>
                                    <small class="text-red-500 text-xs">This field needs your attention</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-[#bfc9d4] text-xs md:text-sm">
                        <div class="w-full flex items-baseline space-x-1">
                            <label class="font-medium w-28 overflow-hidden" for="dob">D.O.B:</label>
                            <input class="flex-grow px-2 md:px-4 pt-4 bg-[#0e1726] transition-colors duration-200 transform focus:outline-none border-b-2 border-slate-800 focus:border-b-slate-500" type="text" name="dob" id="dob" value="<?php echo $dob ?>" disabled>
                        </div>
                    </div>

                    <div class="text-[#bfc9d4] text-xs md:text-sm">
                        <div class="w-full flex items-baseline space-x-1">
                            <label class="font-medium w-28 overflow-hidden" for="country">Nationality:</label>
                            <input class="flex-grow px-2 md:px-4 pt-4 bg-[#0e1726] transition-colors duration-200 transform focus:outline-none border-b-2 border-slate-800 focus:border-b-slate-500" type="text" name="country" id="country" value="<?php echo $country ?>" disabled>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>

    <div class="w-full py-5" id="step-2">
        <div class="w-full flex justify-center">
            <div class="w-11/12 rounded-md bg-[#0e1726] p-2 md:p-4">
                <div class="flex justify-between items-center">
                    <div>
                        <h6 class="bg-transparent text-center text-[#ebedf2] text-xs md:text-sm capitalize">
                            Step 2: Address Details
                        </h6>
                    </div>
                </div>

                <hr class="w-full border-b border-dotted border-gray-600 border mt-1 mb-10">

                <div>
                    <div class="text-[#bfc9d4] text-xs md:text-sm">
                        <div class="w-full flex items-baseline space-x-1">
                            <label class="font-medium w-28 overflow-hidden" for="country">Address:</label>
                            <input class="flex-grow px-2 md:px-4 pt-4 bg-[#0e1726] transition-colors duration-200 transform focus:outline-none border-b-2 border-slate-800 focus:border-b-slate-500" type="text" name="address" id="address" value="<?php echo $street_address ?>" disabled>
                        </div>
                    </div>

                    <div class="text-[#bfc9d4] text-xs md:text-sm">
                        <div class="w-full flex items-baseline space-x-1">
                            <label class="font-medium w-28 overflow-hidden" for="addrstateess">State:</label>
                            <input class="flex-grow px-2 md:px-4 pt-4 bg-[#0e1726] transition-colors duration-200 transform focus:outline-none border-b-2 border-slate-800 focus:border-b-slate-500" type="text" name="state" id="state" value="<?php echo $state ?>" disabled>
                        </div>
                    </div>

                    <div class="text-[#bfc9d4] text-xs md:text-sm">
                        <div class="w-full flex items-baseline space-x-1">
                            <label class="font-medium w-28 overflow-hidden" for="country">Country:</label>
                            <input class="flex-grow px-2 md:px-4 pt-4 bg-[#0e1726] transition-colors duration-200 transform focus:outline-none border-b-2 border-slate-800 focus:border-b-slate-500" type="text" name="country" id="country" value="<?php echo $country ?>" disabled>
                        </div>
                    </div>

                    <div class="text-[#bfc9d4] text-xs md:text-sm">
                        <div class="w-full flex items-baseline space-x-1">
                            <label class="font-medium w-28 overflow-hidden" for="phone_no">Phone No:</label>
                            <input class="flex-grow px-2 md:px-4 pt-4 bg-[#0e1726] transition-colors duration-200 transform focus:outline-none border-b-2 border-slate-800 focus:border-b-slate-500" type="text" name="phone_no" id="phone_no" value="<?php echo $phone_no ?>" disabled>
                        </div>
                    </div>

                    <div class="text-[#bfc9d4] text-xs md:text-sm">
                        <div class="w-full flex items-baseline space-x-1">
                            <label class="font-medium w-28 overflow-hidden" for="email">Email:</label>
                            <input class="flex-grow px-2 md:px-4 pt-4 bg-[#0e1726] transition-colors duration-200 transform focus:outline-none border-b-2 border-slate-800 focus:border-b-slate-500" type="text" name="email" id="email" value="<?php echo $email ?>" disabled>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="w-full py-5" id="step-3">
        <div class="w-full flex justify-center">
            <div class="w-11/12 rounded-md bg-[#0e1726] p-2 md:p-4">
                <div class="flex justify-between items-center">
                    <div>
                        <h6 class="bg-transparent text-center text-[#ebedf2] text-xs md:text-sm capitalize">
                            Step 3: ID Document Upload
                        </h6>
                    </div>
                </div>

                <hr class="w-full border-b border-dotted border-gray-600 border mt-1 mb-10">

                <div>
                    <div class="text-[#bfc9d4] text-xs md:text-sm">
                        <div class="w-full flex items-baseline space-x-1">
                            <label class="font-medium w-32 overflow-hidden" for="id_type">Id Document Type:</label>
                            <select class="flex-grow pt-4 px-2 md:px-4 bg-[#0e1726] transition-colors duration-200 transform focus:outline-none border-b-2 border-slate-800 focus:border-b-slate-500" name="id_type" id="id_type" required" ">
                                <option value="Passport">Passport</option>
                                <option value="Driving License">Driving License</option>
                                <option value="Votor Card">Voter Card</option>
                                <option value="National ID Card">National ID Card</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="text-[#bfc9d4] text-xs md:text-sm">
                    <div class="w-full flex items-baseline space-x-1">
                        <label class="font-medium w-32 overflow-hidden" for="front_id">Front ID:</label>
                        <div class="lg:flex-grow pt-4 lg:flex items-center space-x-2">
                            <div class="w-full lg:w-1/3">
                                <label title="click to add file" class="font-medium py-1 px-3 flex flex-grow justify-center items-center space-x-2 border rounded-md border-slate-800 hover:border-slate-600 cursor-pointer" for="front_id">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                                    </svg>

                                    <h5>Choose file</h5>
                                </label>
                                <input class="hidden attachment-input" type="file" name="front_id" id="front_id" data-preview="front-preview" accept="image/png, image/jpg, image/jpeg" required>
                            </div>

                            <div class="attachment-list w-full lg:w-2/3"></div>
                            <div><img id="front-preview" class="hidden" src="https://demo-trade.credcrypto.net/public/assets/imgs/placeholder.png" alt=""></div>
                        </div>
                    </div>
                </div>

                <div class="text-[#bfc9d4] text-xs md:text-sm">
                    <div class="w-full flex items-baseline space-x-1">
                        <label class="font-medium w-32 overflow-hidden" for="back_id">Back ID:</label>
                        <div class="lg:flex-grow pt-4 lg:flex items-center space-x-2">
                            <div class="w-full lg:w-1/3">
                                <label title="click to add file" class="font-medium py-1 px-3 flex flex-grow justify-center items-center space-x-2 border rounded-md border-slate-800 hover:border-slate-600 cursor-pointer" for="back_id">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                                    </svg>

                                    <h5>Choose file</h5>
                                </label>
                                <input class="hidden attachment-input" type="file" name="back_id" id="back_id" data-preview="back-preview" accept="image/png, image/jpg, image/jpeg" required>
                            </div>

                            <div class="attachment-list w-full lg:w-2/3"></div>
                            <div><img id="back-preview" class="hidden" src="https://demo-trade.credcrypto.net/public/assets/imgs/placeholder.png" alt=""></div>
                        </div>
                    </div>
                </div>

                <div class="text-[#bfc9d4] text-xs md:text-sm">
                    <div class="w-full flex items-baseline space-x-1">
                        <label class="font-medium w-32 overflow-hidden" for="selfie">Selfie:</label>
                        <div class="lg:flex-grow pt-4 lg:flex items-center space-x-2">
                            <div class="w-full lg:w-1/3">
                                <label title="click to add file" class="font-medium py-1 px-3 flex flex-grow justify-center items-center space-x-2 border rounded-md border-slate-800 hover:border-slate-600 cursor-pointer" for="selfie">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                                    </svg>

                                    <h5>Choose file</h5>
                                </label>
                                <input class="hidden attachment-input" type="file" name="selfie" id="selfie" accept="image/png, image/jpg, image/jpeg" data-preview="selfie-preview" required>
                            </div>

                            <div class="attachment-list w-full lg:w-2/3"></div>
                            <div><img id="selfie-preview" class="hidden" src="https://demo-trade.credcrypto.net/public/assets/imgs/placeholder.png" alt=""></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="w-full py-5" id="step-4">
        <div class="w-full flex justify-center">
            <div class="w-11/12 rounded-md bg-[#0e1726] p-2 md:p-4">
                <div class="flex justify-between items-center">
                    <div>
                        <h6 class="bg-transparent text-center text-[#ebedf2] text-xs md:text-sm capitalize">
                            Step 4: TERMS
                        </h6>
                    </div>
                </div>

                <hr class="w-full border-b border-dotted border-gray-600 border mt-1 mb-10">

                <div>
                    <div class="text-[#bfc9d4] text-xs md:text-sm">
                        <div class="w-full flex items-baseline space-x-1">
                            By Proceeding to submit your provided KYC Documents, you agree to that all information provided are accurate and represent you.
                            <br><br>
                            <input type="checkbox" name="agree" id="agree" checked  required>
                            <label class="font-medium w-28 overflow-hidden" for="country">Agree</label>
                            
                        </div>
                    </div>

                    
                </div>
            </div>
        </div>
    </div>

        
    
    <div class="w-full py-5 id-navigate">
        <div class="w-full flex justify-center">
            <div class="w-11/12 rounded-md bg-[#0e1726] p-2 md:p-4">
                <div class="flex justify-between items-center">
                    <div align="left">
                        <button type="button" value="0"  class="back-button text-xs md:text-sm text-[#d1d5db] text-center px-5 py-2 bg-[#1b2e4b] hover:bg-gray-700 rounded-md">
                            
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
                            </svg>
                        </button>
                    </div>
                    <div align="right">
                        <button type="button" value="1" class="next-button text-xs md:text-sm text-[#d1d5db] text-center px-5 py-2 bg-[#1b2e4b] hover:bg-gray-700 rounded-md">
                            
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                            </svg>
                        </button>
                    </div>  
                </div>
            </div>
        </div>
    </div>   
</form>

            

        </div>
    </div>
    
</div>

<script>
// Client-side validation for file uploads
document.getElementById('kyc_form').addEventListener('submit', function(e) {
    const files = ['front_id', 'back_id', 'selfie'];
    const maxSize = 5 * 1024 * 1024; // 5MB
    
    for (const file of files) {
        const input = document.getElementById(file);
        if (input.files.length === 0) {
            alert(`Please upload ${file.replace('_', ' ')}`);
            e.preventDefault();
            return;
        }
        
        if (input.files[0].size > maxSize) {
            alert(`File too large for ${file.replace('_', ' ')}. Max 5MB allowed`);
            e.preventDefault();
            return;
        }
    }
    
    if (!document.getElementById('agree').checked) {
        alert('You must agree to the terms');
        e.preventDefault();
        return;
    }
    
    // Show loading indicator
    document.getElementById('preloader').style.display = 'block';
});
</script>

<script>
    $(".skiptranslate").text("")
</script>


<script>
    $(".attachment-input").change(function() {
        // first empty whatever is innit
        $(this).parent().siblings(".attachment-list").html("")

        var names = [];
        for (var i = 0; i < $(this).get(0).files.length; ++i) {
            if (names.length < 1)
                names.push($(this).get(0).files[i].name);
            else {
                names.push(", " + $(this).get(0).files[i].name);

            }
        }

        // let chosenDoc = $(this).val().split('\\').pop()
        $(this).parent().siblings(".attachment-list").append(names)
    })
</script>


<script>
    //hide all steps on page load
    $(document).ready(function(){
        $("#step-1").hide();
        $("#step-2").hide();
        $("#step-3").hide();
        $("#step-4").hide();
        $(".id-navigate").hide();
    });

    //show step 1 when 
    $("#start-button").on('click', function(){
        $("#step-1").show();
        $('html,body').animate({scrollTop: $("#step-1").offset().top}, 2000);
        $(this).hide();
        $(".id-navigate").show();
        $(".back-button").hide();
    });
    
    $(".id-navigate").on('click', function(){
        if( parseInt($(".back-button").val()) >= 1) {
            $(".back-button").show();
        } else {
            $(".back-button").hide();
        }

        if ( parseInt($(".next-button").val()) === 4 ){
            $(".next-button").html('SUBMIT');
        } else if ( parseInt($(".next-button").val()) === 5 ) {
            $("#kyc_form").submit()
        } else {
            $(".next-button").html('<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>');
        }
    });

    //action for next button 
    $(".next-button").on('click', function(){
        
        var current_step = parseInt($(this).val());
        var next_step = current_step + 1;
        var next_to = '#step-' + next_step;
        $("#step-" + current_step).hide();
        $(next_to).show('slow');
        $(this).val(next_step); //update next step
        $(".back-button").val(current_step); //update back step
        
        if (current_step <= 4) {
            $('html,body').animate({scrollTop: $(next_to).offset().top}, 2000);
        }
        
        
    });

    //action for back button
    $(".back-button").on('click', function(){
        var current_back_step = parseInt($(this).val());
        var forward = current_back_step + 1;
        var to_show = "#step-" + current_back_step;
        var to_hide = "#step-" + forward;
        
        $(to_hide).hide();
        $(to_show).show('slow');
        $('html,body').animate({scrollTop: $(to_show).offset().top}, 2000);
        //decrease the values for back and next
        $(this).val(current_back_step - 1);
        $(".next-button").val(current_back_step);
        
    });

</script>



<?php include 'footer.php'; ?>
Back to Directory=ceiIENDB`