<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Multiple Progress Bars</h2>
  <p>Create a stacked progress bar by placing multiple bars into the same div with class="progress":</p> 
  <div class="progress">
    <div class="progress-bar bg-warning" style="width:20%">
      Pending
    </div>
    <div class="progress-bar bg-success" style="width:20%">
      Approved
    </div>
    <div class="progress-bar bg-primary" style="width:20%">
      Verified
    </div>
     <div class="progress-bar bg-info" style="width:20%">
      Worked On
    </div>
     <div class="progress-bar bg-dark" style="width:20%">
      Ready
    </div>
  </div>
</div>

</body>
</html>









*******************************************************************************************************
WORKING TRASCRIPT PROCESSOR
*******************************************************************************************************

if ($action == 'transcriptApplication') {
    // Processing uploaded file
    $uploadDirectory = '../uploads/'; // Directory to save uploaded files
    $uploadedFileName = $_FILES['receipt_path']['name'];
    $uploadedFilePath = $uploadDirectory . $uploadedFileName;

    if (move_uploaded_file($_FILES['receipt_path']['tmp_name'], $uploadedFilePath)) {
        // File uploaded successfully, continue with database insertion

        

        // Extracting form data
        extract($_POST);

        $created_at = (new DateTime())->format('Y-m-d');

        $query = "INSERT INTO tbltranscript_requests (rqst_id, stuid, name, email, level, prog, phone, purpose, ogname, ogcontact, ogphone, ogemail, ogpostal, created_at, deliv_mode, receipt_path, status) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?,?,?,?)";
        $stmt = $conn->prepare($query);

        // Generating request ID
        function generateRandomString($length) {
            $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
            $randomString = '';
            for ($i = 0; $i < $length; $i++) {
                $randomString .= $characters[rand(0, strlen($characters) - 1)];
            }
            return $randomString;
        }
        $rqst_id = $stuid . '-TRANS-' . generateRandomString(5);

        // Function to generate random string of specified length


        $stmt->bind_param('sssssssssssssssss', $rqst_id, $stuid, $name, $email, $level, $prog, $phone, $purpose, $ogname, $ogcontact, $ogphone, $ogemail, $ogpostal, $created_at, $deliv_mode, $uploadedFilePath, $status);

        if ($stmt->execute()) {
            echo '
            <script>
                alert("Info has successfully been added");
                location.href="../../Frontend/Client/NewRequest.php";
            </script>';
        } else {
            echo "Error: " . $stmt->error;
        }

        $stmt->close();
    } else {
        // Failed to move uploaded file
        echo "Error: Failed to upload file.";
    }

    $conn->close();
}



**********************************************************************************
WORKING AJAX METHOD FOR STATUS UPDATE
**********************************************************************************
  $(".dfaIntroApprove").click(function (e) {
            e.preventDefault();
            let id = $(this).data('id')

            $.ajax({
                type: "post",
                url: "../../backend/scripts/ajax.php?action=dfaIntroApprove&id=" + id,
                success: function (response) {
                    // alert(response)
                    if (response == 1) {
                        alert('REQUEST HAS BEEN VERIFIED')
                        location.reload();
                    }else {
                        console.log("Failed to approve: ", response);
                    }
                }
            });

        });

        $(".dfaIntroReject").click(function (e) {
            e.preventDefault();
            let id = $(this).data('id')

            $.ajax({
                type: "post",
                url: "../../backend/scripts/ajax.php?action=dfaIntroReject&id=" + id,
                success: function (response) {
                    // alert(response)
                    if (response == 1) {
                        alert('REQUEST HAS BEEN REJECTED')
                        location.reload();
                    }else {
                        console.log("Failed to approve: ", response);
                    }
                }
            });

        });






***********************************************************************************
HIDING INPUT FIELDS BASED ON DROPDOWN SELECTION
***********************************************************************************
//SELECTION FROM THE FRONTEND
 <div class='pb-4 grid-cols-2 '>
             <label>Mode of Collection</labelz                <select name='delivery'
                                class='w-full border-2 border-gray-700 rounded-md focus:outline-blue-800 p-2'
                                placeholder=' +233 123 456 7890' id="delivery-mode">
                                <option>--SELECT--</option>
                                <option value='post'>Post</option>
                                <option value='courier'>Courier </option>
                                <option value='email'>Email </option>
                                <option value='campus'>Seaview Campus</option>
                                <option value='campus'>KCC Campus</option>
                            </select>
                        </div>


document.getElementById('delivery-mode').addEventListener('change', function() {
    var postalAddressField = document.getElementById('postal-address-field');  
    var physicalAddressField = document.getElementById('physical-address-field');  
    if (this.value === 'post') {
        postalAddressField.classList.remove('hidden');
        physicalAddressField.classList.add('hidden');
    } 
    else if
    (this.value === 'courier') {
        physicalAddressField.classList.remove('hidden');
        postalAddressField.classList.add('hidden');
    }
    else {
        postalAddressField.classList.add('hidden');
        physicalAddressField.classList.add('hidden');
    }
});