<?php include "include/header.php";?>
<?php

$user_id = $row["user_id"];

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // Collect & sanitize data
    $backup_type    = mysqli_real_escape_string($myConn, $_POST['select_backup_typ']);
    $name           = mysqli_real_escape_string($myConn, $_POST['name']);
    $age            = (int) $_POST['age'];
    $work_status    = mysqli_real_escape_string($myConn, $_POST['work_status']);
    $business_owner = mysqli_real_escape_string($myConn, $_POST['bussines_owner']);
    $amount_range   = mysqli_real_escape_string($myConn, $_POST['select_range']);

    // Basic validation
    if (empty($backup_type) || empty($name) || empty($age) || empty($amount_range)) {
        echo "Please fill all required fields.";
        exit;
    }

    // Prepared statement (recommended)
    $sql = "INSERT INTO secure_funds 
            (user_id, backup_type, name, age, work_status, business_owner, amount_range)
            VALUES (?, ?, ?, ?, ?, ?, ?)";

    $stmt = mysqli_prepare($myConn, $sql);

    if ($stmt) {
        mysqli_stmt_bind_param(
            $stmt,
            "ississs",
            $user_id,
            $backup_type,
            $name,
            $age,
            $work_status,
            $business_owner,
            $amount_range
        );

        if (mysqli_stmt_execute($stmt)) {
            echo "<script>
                    alert('Your info has been successfully Updated, Please wait while we update your data');
                    window.history.back();
                  </script>";
        } else {
             echo "Error inserting data: " . mysqli_stmt_error($stmt);
        }

        mysqli_stmt_close($stmt);
    } else {
        echo "<script>
                alert('Something went wrong. Please try again later.');
                window.history.back();
              </script>";
    }
}



?>


<div class="page-content footer-clear">

            <!-- Page Title-->
            <div class="pt-3">
                <div class="page-title d-flex">
                    <div class="align-self-center">
                        <a href="#" data-back-button class="me-3 ms-0 icon icon-xxs bg-theme rounded-s shadow-m">
                            <i class="bi bi-chevron-left color-theme font-14"></i>
                        </a>
                    </div>
                    <div class="align-self-center me-auto">
                        <!-- <p class="color-highlight">Hello Enabled</p> -->
                        <h2 class="color-theme">Secure 401K or IRA</h2>
                    </div>
                    <div class="align-self-center ms-auto">
                        <!-- <a href="#" data-bs-toggle="offcanvas" data-bs-target="#menu-notifications"
							class="icon gradient-blue color-white shadow-bg shadow-bg-xs rounded-m">
							<i class="bi bi-bell-fill font-17"></i>
							<em class="badge bg-red-dark color-white scale-box">3</em>
						</a> -->
                        <a href="#" data-bs-toggle="dropdown"
                            class="icon gradient-blue shadow-bg shadow-bg-s rounded-m">
                            <img src="images/user-default.png" width="45" class="rounded-m" alt="img">
                        </a>
                        <!-- Page Title Dropdown Menu-->
                        <div class="dropdown-menu">
                            <div class="card card-style shadow-m mt-1 me-1">
                                <div class="list-group list-custom list-group-s list-group-flush rounded-xs px-3 py-1">
                                    <!-- <a href="page-wallet.html" class="list-group-item">
                    <i
                        class="has-bg gradient-green shadow-bg shadow-bg-xs color-white rounded-xs bi bi-credit-card"></i>
                    <strong class="font-13">Wallet</strong>
                </a>
                <a href="page-activity.html" class="list-group-item">
                    <i
                        class="has-bg gradient-blue shadow-bg shadow-bg-xs color-white rounded-xs bi bi-graph-up"></i>
                    <strong class="font-13">Activity</strong>
                </a> -->
                                    <a href="profile" class="list-group-item">
                                        <i
                                            class="has-bg gradient-yellow shadow-bg shadow-bg-xs color-white rounded-xs bi bi-person-circle"></i>
                                        <strong class="font-13">Account</strong>
                                    </a>

                                    <a href="#" class="list-group-item" data-toggle-theme=""
                                        data-trigger-switch="switch-1">
                                        <i
                                            class="has-bg gradient-blue shadow-bg shadow-bg-xs color-white rounded-xs bi-lightbulb-fill"></i>
                                        <strong class="font-13">Dark Mood</strong>
                                        <div class="form-switch ios-switch switch-green switch-s me-2">
                                            <input type="checkbox" data-toggle-theme="" class="ios-input" id="switch-1">
                                            <label class="custom-control-label" for="switch-1"></label>
                                        </div>
                                    </a>

                                    <a href="includes/logout.php" class="list-group-item">
                                        <i
                                            class="has-bg gradient-red shadow-bg shadow-bg-xs color-white rounded-xs bi bi-power"></i>
                                        <strong class="font-13">Log Out</strong>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <svg id="header-deco" viewBox="0 0 1440 600" xmlns="http://www.w3.org/2000/svg"
                class="transition duration-300 ease-in-out delay-150">
                <path id="header-deco-1"
                    d="M 0,600 C 0,600 0,120 0,120 C 92.36363636363635,133.79904306220095 184.7272727272727,147.59808612440193 287,148 C 389.2727272727273,148.40191387559807 501.4545454545455,135.40669856459328 592,129 C 682.5454545454545,122.5933014354067 751.4545454545455,122.77511961722489 848,115 C 944.5454545454545,107.22488038277511 1068.7272727272727,91.49282296650718 1172,91 C 1275.2727272727273,90.50717703349282 1357.6363636363635,105.25358851674642 1440,120 C 1440,120 1440,600 1440,600 Z">
                </path>
                <path id="header-deco-2"
                    d="M 0,600 C 0,600 0,240 0,240 C 98.97607655502392,258.2105263157895 197.95215311004785,276.4210526315789 278,282 C 358.04784688995215,287.5789473684211 419.16746411483257,280.5263157894737 524,265 C 628.8325358851674,249.4736842105263 777.377990430622,225.47368421052633 888,211 C 998.622009569378,196.52631578947367 1071.3205741626793,191.57894736842107 1157,198 C 1242.6794258373207,204.42105263157893 1341.3397129186603,222.21052631578948 1440,240 C 1440,240 1440,600 1440,600 Z">
                </path>
                <path id="header-deco-3"
                    d="M 0,600 C 0,600 0,360 0,360 C 65.43540669856458,339.55023923444975 130.87081339712915,319.1004784688995 245,321 C 359.12918660287085,322.8995215311005 521.9521531100479,347.1483253588517 616,352 C 710.0478468899521,356.8516746411483 735.3205741626795,342.3062200956938 822,333 C 908.6794258373205,323.6937799043062 1056.7655502392345,319.62679425837325 1170,325 C 1283.2344497607655,330.37320574162675 1361.6172248803828,345.1866028708134 1440,360 C 1440,360 1440,600 1440,600 Z">
                </path>
                <path id="header-deco-4"
                    d="M 0,600 C 0,600 0,480 0,480 C 70.90909090909093,494.91866028708137 141.81818181818187,509.8373205741627 239,499 C 336.18181818181813,488.1626794258373 459.6363636363636,451.5693779904306 567,446 C 674.3636363636364,440.4306220095694 765.6363636363636,465.88516746411483 862,465 C 958.3636363636364,464.11483253588517 1059.8181818181818,436.8899521531101 1157,435 C 1254.1818181818182,433.1100478468899 1347.090909090909,456.555023923445 1440,480 C 1440,480 1440,600 1440,600 Z">
                </path>
            </svg>

            <div class="card card-style">
                <div class="content">
                    <div class="tabs tabs-pill" id="tab-group-2">
                        <div class="tab-controls rounded-m p-1 overflow-visible">
                            <a class="font-13 rounded-m shadow-bg shadow-bg-s" data-bs-toggle="collapse" href="#tab-4"
                                aria-expanded="true">Secure 401K or IRA</a>
                            <a class="font-13 rounded-m shadow-bg shadow-bg-s" data-bs-toggle="collapse" href="#tab-5"
                                aria-expanded="false">History</a>
                            <!-- <a class="font-13 rounded-m shadow-bg shadow-bg-s" data-bs-toggle="collapse" href="#tab-6" aria-expanded="false">Payments</a> -->
                        </div>
                        <div class="mt-3"></div>
                        <!-- Tab Group 1 -->
                        <div class="collapse show" id="tab-4" data-bs-parent="#tab-group-2">
                            <div class="card card-style">
                                <div class="content">
                                    <div class="alert bg-fade2-blue alert-dismissible color-blue-dark rounded-s fade show pe-2"
                                        role="alert">
                                        Secure your 401(k) or IRA by contributing regularly, diversifying investments,
                                        monitoring and adjusting your strategy, and staying informed. </div>



                                    <form method="POST">
                                        <div class="form-custom form-label form-icon mb-3">
                                            <i class="bi bi-house-lock-fill  font-13"></i>
                                            <select name="select_backup_typ" class="form-select rounded-xs"
                                                id="select_backup_typ">
                                                <option value="">Select 401K or IRA</option>
                                                <option value="IRA">IRA</option>
                                                <option value="401K">401K</option>
                                            </select>
                                            <label for="select_backup_typ"
                                                class="color-theme form-label-always-active">Secure using 401K or
                                                IRA</label>
                                            <span>(required)</span>
                                        </div>

                                        <div class="form-custom form-label form-icon mb-3">
                                            <i class="bi bi-person-circle font-14"></i>
                                            <input type="text" name="name" class="form-control rounded-xs" id="name"
                                                placeholder="John Doe" required value="">
                                            <label for="name" class="color-theme form-label-always-active">Your
                                                Name</label>
                                            <span>(required)</span>
                                        </div>

                                        <div class="form-custom form-label form-icon mb-3">
                                            <i class="bi bi-person-circle font-14"></i>
                                            <input type="text" name="age" class="numberinput form-control rounded-xs"
                                                id="age" placeholder="25" required value="">
                                            <label for="age" class="color-theme form-label-always-active">Your
                                                Age</label>
                                            <span>(required)</span>
                                        </div>

                                        <div class="form-custom form-label form-icon mb-3">
                                            <i class="bi bi-file-fill  font-13"></i>
                                            <select name="work_status" class="form-select rounded-xs" id="work_status">
                                                <option value="">Select your work status</option>
                                                <option value="Employed">Employed</option>
                                                <option value="Self-employed">Self-employed</option>
                                                <option value="Unemployed">Unemployed</option>
                                                <option value="Retired">Retired</option>
                                            </select>
                                            <label for="work_status" class="color-theme form-label-always-active">Work
                                                Status</label>
                                        </div>

                                        <div class="form-custom form-label form-icon mb-3">
                                            <i class="bi bi-file-fill  font-13"></i>
                                            <select name="bussines_owner" class="form-select rounded-xs"
                                                id="bussines_owner">
                                                <option value="">Select an Option</option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                            <label for="bussines_owner" class="color-theme form-label-always-active">Are
                                                you a business owner?</label>
                                        </div>

                                        <input type="hidden" name="edit_id" value="default">

                                        <div class="row">
                                            <label class="color-theme form-label-always-active radiolabel">Amount
                                                Range</label>

                                            <div class="col-sm-6 col-6 col-md-6 col-xl-4">
                                                <div class="form-check form-check-custom">
                                                    <input class="form-check-input" type="radio" name="select_range"
                                                        id="1_20000" value="$1 to $20000">
                                                    <label class="form-check-label " for="1_20000">$1 to $20000</label>
                                                    <i class="is-checked color-green-dark bi bi-check-circle-fill"></i>
                                                    <i class="is-unchecked color-highlight bi bi-circle-fill"></i>
                                                </div>
                                            </div>

                                            <div class="col-sm-6 col-6 col-md-6 col-xl-4">
                                                <div class="form-check form-check-custom">
                                                    <input class="form-check-input" type="radio" name="select_range"
                                                        id="21000_40000" value="$21000 to $40000">
                                                    <label class="form-check-label " for="21000_40000">$21000 to
                                                        $40000</label>
                                                    <i class="is-checked color-green-dark bi bi-check-circle-fill"></i>
                                                    <i class="is-unchecked color-highlight bi bi-circle-fill"></i>
                                                </div>
                                            </div>

                                            <div class="col-sm-6 col-6 col-md-6 col-xl-4">
                                                <div class="form-check form-check-custom">
                                                    <input class="form-check-input" type="radio" name="select_range"
                                                        id="41000_60000" value="$41000 to $60000">
                                                    <label class="form-check-label " for="41000_60000">$41000 to
                                                        $60000</label>
                                                    <i class="is-checked color-green-dark bi bi-check-circle-fill"></i>
                                                    <i class="is-unchecked color-highlight bi bi-circle-fill"></i>
                                                </div>
                                            </div>

                                            <div class="col-sm-6 col-6 col-md-6 col-xl-4">
                                                <div class="form-check form-check-custom">
                                                    <input class="form-check-input" type="radio" name="select_range"
                                                        id="61000_80000" value="$61000 to $80000">
                                                    <label class="form-check-label " for="61000_80000">$61000 to
                                                        $80000</label>
                                                    <i class="is-checked color-green-dark bi bi-check-circle-fill"></i>
                                                    <i class="is-unchecked color-highlight bi bi-circle-fill"></i>
                                                </div>
                                            </div>

                                            <div class="col-sm-6 col-6 col-md-6 col-xl-4">
                                                <div class="form-check form-check-custom">
                                                    <input class="form-check-input" type="radio" name="select_range"
                                                        id="81000_100000" value="$81000 to $100000">
                                                    <label class="form-check-label " for="81000_100000">$81000 to
                                                        $100000</label>
                                                    <i class="is-checked color-green-dark bi bi-check-circle-fill"></i>
                                                    <i class="is-unchecked color-highlight bi bi-circle-fill"></i>
                                                </div>
                                            </div>

                                            <div class="col-sm-6 col-6 col-md-6 col-xl-4">
                                                <div class="form-check form-check-custom">
                                                    <input class="form-check-input" type="radio" name="select_range"
                                                        id="101000_200000" value="$101000 to $200000">
                                                    <label class="form-check-label " for="101000_200000">$101000 to
                                                        $200000</label>
                                                    <i class="is-checked color-green-dark bi bi-check-circle-fill"></i>
                                                    <i class="is-unchecked color-highlight bi bi-circle-fill"></i>
                                                </div>
                                            </div>

                                            <div class="col-sm-6 col-6 col-md-6 col-xl-4">
                                                <div class="form-check form-check-custom">
                                                    <input class="form-check-input" type="radio" name="select_range"
                                                        id="201000_500000" value="$201000 to $500000">
                                                    <label class="form-check-label " for="201000_500000">$201000 to
                                                        $500000</label>
                                                    <i class="is-checked color-green-dark bi bi-check-circle-fill"></i>
                                                    <i class="is-unchecked color-highlight bi bi-circle-fill"></i>
                                                </div>
                                            </div>

                                            <div class="col-sm-6 col-6 col-md-6 col-xl-4">
                                                <div class="form-check form-check-custom">
                                                    <input class="form-check-input" type="radio" name="select_range"
                                                        id="1000000_above" value="$1000000 to Above">
                                                    <label class="form-check-label " for="1000000_above">$1000000 to
                                                        Above</label>
                                                    <i class="is-checked color-green-dark bi bi-check-circle-fill"></i>
                                                    <i class="is-unchecked color-highlight bi bi-circle-fill"></i>
                                                </div>
                                            </div>
                                        </div>

                                        <button id="secure_funds"
                                            class="btn btn-full bg-blue-dark rounded-xs text-uppercase font-700 w-100 btn-s mt-4"
                                            type="submit">
                                            Submit form
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!-- Tab Group 2 -->
                        <div class="collapse" id="tab-5" data-bs-parent="#tab-group-2">
                            <?php
                                $sql = "SELECT id, name, created_at, amount_range, backup_type 
                                    FROM secure_funds WHERE user_id = '$user_id'
                                    ORDER BY created_at DESC";
                            
                            $result = mysqli_query($myConn, $sql);
                            
                            if (mysqli_num_rows($result) > 0) {
                                while ($row = mysqli_fetch_assoc($result)) {
                            
                                    $id     = $row['id'];
                                    $name   = htmlspecialchars($row['name']);
                                    $date   = date("jS F Y h:i A", strtotime($row['created_at']));
                                    $amount = htmlspecialchars($row['amount_range']);
                                    $type   = htmlspecialchars($row['backup_type']);
                            ?>
                               <a href="#"
                                   class="d-flex py-1"
                                   data-bs-toggle="offcanvas"
                                   data-bs-target="#menu-activity-1"
                                   data-name="<?= $name ?>"
                                   data-date="<?= $date ?>"
                                   data-status="Completed"
                                   data-id="<?= $id ?>"
                                   data-type="<?= $type ?>"
                                   data-paid-to="Secure Fund"
                                   data-amount="<?= $amount ?>"
                                   data-paid-from="User Account">
                    
                                    <div class="align-self-center ps-1">
                                        <h5 class="pt-1 mb-n1"><?= $name ?></h5>
                                        <p class="mb-0 font-11 opacity-70"><?= $date ?></p>
                                    </div>
                    
                                    <div class="align-self-center ms-auto text-end">
                                        <span class="btn btn-xxs bg-green-dark shadow-bg shadow-bg-xs">
                                            Details
                                        </span>
                                    </div>
                                </a>
                            <?php } }?>
                            <div class="divider my-2 opacity-50"></div>
                        </div>
                        <!-- Tab Group 3 -->

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




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



        <!-- Transaction Action Sheet -->
        <div id="menu-activity-1" class="offcanvas offcanvas-bottom offcanvas-detached rounded-m">
            <!-- menu-size will be the dimension of your menu. If you set it to smaller than your content it will scroll-->
            <div class="menu-size" style="height:380px;">
                <div class="content">
                    <a href="#" class="d-flex py-1 pb-4">
                        <div class="align-self-center">
                            <span class="icon rounded-s me-2 gradient-green shadow-bg shadow-bg-xs"><i
                                    class="bi bi-person-circle font-18 color-white"></i></span>
                        </div>
                        <div class="align-self-center ps-1">
                            <h5 id="name" class="pt-1 mb-n1"></h5>
                            <p id="ststus_writeup" class="mb-0 font-11 opacity-70">Awaiting Approval</p>
                        </div>
                        <div class="align-self-center ms-auto text-end">
                            <h4 id="ststus" class="pt-1 font-14 mb-n1 color-yellow-dark">PENDING</h4>
                            <p id="id_num" class="mb-0 font-11"></p>
                        </div>
                    </a>
                    <div class="row">

                        <strong class="col-5 color-theme">Type</strong>
                        <strong id="type_of_bk" class="col-7 text-end">Transfer</strong>
                        <div class="col-12 mt-2 mb-2">
                            <div class="divider my-0"></div>
                        </div>
                        <strong class="col-5 color-theme">Age</strong>
                        <strong id="age1" class="col-7 text-end">Transfer</strong>
                        <div class="col-12 mt-2 mb-2">
                            <div class="divider my-0"></div>
                        </div>
                        <strong class="col-5 color-theme">Amount Range</strong>
                        <strong id="range1" class="col-7 text-end color-highlight"></strong>
                        <div class="col-12 mt-2 mb-2">
                            <div class="divider my-0"></div>
                        </div>
                        <strong class="col-5 color-theme">Own a business?</strong>
                        <strong id="business" class="col-7 text-end"></strong>
                        <div class="col-12 mt-2 mb-2">
                            <div class="divider my-0"></div>
                        </div>
                        <strong class="col-5 color-theme">Date</strong>
                        <strong id="date1" class="col-7 text-end "></strong>
                        <div class="col-12 mt-2 mb-2">
                            <div class="divider my-0"></div>
                        </div>
                        <strong class="col-5 color-theme">Work Status</strong>
                        <strong id="wrk_status" class="col-7 text-end"></strong>
                        <div class="col-12 mt-2 mb-4">
                            <div class="divider my-0"></div>
                        </div>

                        <div id="button_div">
                            <!-- <div class="col-6">
                                <a href="#" class="btn btn-s btn-full gradient-green shadow-bg shadow-bg-xs">Edit Info</a>
                            </div> -->
                            <!-- <div class="col-6">
                                <a href="#" data-bs-dismiss="offcanvas" class="btn btn-s btn-full gradient-red shadow-bg shadow-bg-xs">Reject</a>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var links = document.querySelectorAll('a[data-bs-toggle="offcanvas"]');

                links.forEach(function(link) {
                    link.addEventListener('click', function(event) {
                        event.preventDefault();
                        var id = link.getAttribute('data-id');

                        fetch(`includes/server?id=${id}&get_data=get_data`, {
                                headers: {
                                    'X-Requested-With': 'XMLHttpRequest'
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.error) {
                                    console.error('Error:', data.error);
                                    return;
                                }

                                document.querySelector('#name').innerText = data.name;

                                document.querySelector('#ststus_writeup').innerText =
                                    (data.status === "Pending") ? 'Awaiting Approval' : 'Approved';
                                // Clear any existing buttons to avoid duplication
                                $('#button_div').empty();

                                // Append the 'Reject' button if status is 'Pending'
                                if (data.status === "Pending") {
                                    $('#button_div').append(`
                                      <a href="#" data-id="${data.id}" class="edit_data btn btn-s btn-full gradient-yellow shadow-bg shadow-bg-xs">
                                         Edit Info
                                          </a>

                                  `);
                                }

                                document.querySelector('#ststus').innerText = data.status;
                                // Update the color class based on status
                                if (data.status === "Approved") {
                                    $('#ststus').removeClass('color-yellow-dark').addClass('color-green-dark');
                                } else {
                                    $('#ststus').removeClass('color-green-dark').addClass('color-yellow-dark');
                                }
                                document.querySelector('#id_num').innerText = `ID ${data.id}`;
                                document.querySelector('#age1').innerText = data.age;
                                document.querySelector('#range1').innerText = data.amount_range;
                                document.querySelector('#business').innerText = data.business;
                                document.querySelector('#date1').innerText = formatDate(data.date);
                                document.querySelector('#wrk_status').innerText = data.wrk_status;
                                document.querySelector('#type_of_bk').innerText = data.secure_typ;

                            })
                            .catch(error => console.error('Error fetching data:', error));
                    });
                });
            });
            
        </script>
        
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/custom.js"></script>
</body>

</html>