<?php
include 'header.php';
?>


<main class="main-content w-full px-[var(--margin-x)] pb-8">


      <div class="flex items-center space-x-4 py-5 lg:py-6">
        <h2 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
          Manage-Referrals
        </h2>
        <div class="hidden h-full py-1 sm:flex">
          <div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
        </div>
        <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
          <li class="flex items-center space-x-2">
            <a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
              href="#">User</a>
            <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </li>
          <li>Manage-Referrals</li>
        </ul>
      </div>

      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-6 lg:gap-6">












        <div class="card bg-gradient-to-br from-amber-400 to-orange-600 px-4 pb-4 sm:px-5">

          <div class="flex items-center justify-between py-3 text-white">
            <h2 class="text-sm+ font-medium tracking-wide">Referral Bonus</h2>
            <div x-data="usePopper({placement:'bottom-end',offset:4})"
              @click.outside="if(isShowPopper) isShowPopper = false" class="inline-flex">
              <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
                class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-white/20 focus:bg-white/20 active:bg-white/25">
                <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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z">
                  </path>
                </svg>
              </button>

            </div>
          </div>
          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:gap-6">
            <div>

              <div class=" text-3xl font-semibold text-white">
              $<?php echo number_format($ref_balance,2) ?>
              </div>

              <p class="mt-3 text-xs+ text-indigo-100"><?php echo number_format( getCryptoValueByShortCode("BTC", $ref_balance),4) ; ?> BTC</p>
            </div>

            <div class="grid grid-cols-6 gap-4 sm:gap-5 lg:gap-6">


              <div>
                <div x-data="{showModal:false}">
                  <button @click="showModal = true"
                    class="btn mt-3 w-full border border-white/10 bg-white/20 text-white hover:bg-white/30 focus:bg-white/30">
                    <i class="fa fa-credit-card"> </i>
                    <span class="ml-1"> Withdraw Funds </span>
                  </button>

                  <template x-teleport="#x-teleport-target">
                    <div
                      class="fixed inset-0 z-[100] flex flex-col items-center backdrop-blur justify-center overflow-hidden px-4 py-6 sm:px-5"
                      x-show="showModal" role="dialog" @keydown.window.escape="showModal = false">
                      <div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                        @click="showModal = false" x-show="showModal" x-transition:enter="ease-out"
                        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                        x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
                        x-transition:leave-end="opacity-0"></div>
                      <div
                        class="relative w-full max-w-lg origin-top rounded-lg bg-white transition-all duration-300 dark:bg-navy-700"
                        x-show="showModal" x-transition:enter="easy-out" x-transition:enter-start="opacity-0 scale-95"
                        x-transition:enter-end="opacity-100 scale-100" x-transition:leave="easy-in"
                        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95">
                        <div class="flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5">
                          <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
                            Withdraw Funds
                          </h3>
                          <button @click="showModal = !showModal"
                            class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24"
                              stroke="currentColor" stroke-width="2">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                          </button>
                        </div>




                        <div class="px-4 py-4 sm:px-5">
                        <form action="withdrawal.php" method="post">
                        <input type="hidden" value="refbonus" name="balanceType">
                      <div class="mt-4 space-y-4">

                        <label class="block">
                          <span>Enter Amount ($)</span>
                          <input
                            class="form-input mt-1.5 h-12 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                            placeholder="Enter Amount" type="number" name="amount1r" />
                        </label>

                        <label class="block">
                          <span>Select Payment Method</span>
                          <select
                            class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
                            name="walletr">
                            <?php 
                                foreach ($payMethods as $name => $address) {
                                ?>
                                <option value="<?php echo $name ?>"><?php echo $name ?></option>
                            <?php } ?>
                          </select>
                        </label>
                        <label class="block">
                          <span>Wallet Address</span>
                          <input
                            class="form-input mt-1.5 h-12 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                            placeholder="Enter wallet address" type="text" name="address" />
                        </label>

                        <div class="space-x-2 text-right">
                          <button @click="showModal = false"
                            class="btn min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                            Close
                          </button>
                          <button @click="showModal = false"
                            class="btn min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
                            type="submit" name="sub-ref">
                            Proceed to Payment
                          </button>
                        </div>

                      </div>
                    </form>
                        </div>
                      </div>
                    </div>
                  </template>
                </div>

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

        </div>


        <div class="card  px-4 pb-5 sm:px-5 ">
          <div class="flex items-center justify-between py-3">
            <h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
              Invite friends to earn
            </h2>

          </div>

          <div class=" flex items-center justify-between">
            <p class="text-xs+">Earn more commissions by inviting your friends to fund.</p>


          </div>
          <div class="mt-2 space-y-4">
            <label class="block">
              <script type="text/javascript">
                function myFunction() {
                  /* Get the text field */
                  var copyText = document.getElementById("myInput");

                  /* Select the text field */
                  copyText.select();
                  copyText.setSelectionRange(0, 99999); /*For mobile devices*/

                  /* Copy the text inside the text field */
                  document.execCommand("copy");

                  /* Alert the copied text */


                  alert("Copied Referral Link: " + copyText.value);
                }




              </script>
              <input
                class="form-input mt-1.5 h-9 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                placeholder="" type="text" id="myInput" value="<?php echo $siteurl ?>/user/signup.php?ref=<?php echo $refcode ?>" />
            </label>

          </div>


          <button
            class="btn mt-5 h-10 w-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
            onclick="myFunction()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
              fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              icon-name="copy" data-lucide="copy" class="lucide lucide-copy h-4">
              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
              <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
            </svg>
            Copy Link
          </button>
        </div>






      </div>


      <!-- Hoverable Rows -->
      <div class="card px-4 pb-4 mt-4 sm:px-5">
        <div class="mt-3 flex h-8 items-center justify-between ">
          <div
            class=" mt-2 text-base  rounded-full  border-slate-300 text-slate-800 dark:border-navy-450 dark:text-navy-50">
            Active Referrals
          </div>

        </div>

        <div class="mt-6 card pb-4">

          <div>
            <div x-data x-init="$el._x_grid =  new Gridjs.Grid({
                from: $refs.table,
                sort: false,
                search: true,
                pagination: {
    limit: 5
  },
              }).render($refs.wrapper);">
              <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
              <table x-ref="table" class="w-full text-left">
                <thead>
                    <tr>
                        <th class="whitespace-nowrap rounded-l-lg bg-slate-200 px-2 py-3 font-semibold text-slate-800 dark:bg-navy-800 dark:text-navy-100">
                            Date/Time
                        </th>
                        <th class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold text-slate-800 dark:bg-navy-800 dark:text-navy-100">
                            Name
                        </th>
                        <th class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold text-slate-800 dark:bg-navy-800 dark:text-navy-100">
                            E-mail
                        </th>
                        <th class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold text-slate-800 dark:bg-navy-800 dark:text-navy-100">
                            Phone
                        </th>
                        <th class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold text-slate-800 dark:bg-navy-800 dark:text-navy-100">
                            Reg. Date
                        </th>
                        <th class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold text-slate-800 dark:bg-navy-800 dark:text-navy-100">
                            Status
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <?php

                        // Fetch users who registered using this referral code
                        $stmt = $conn->prepare("SELECT id, email, fname, lname, phone, date, status FROM users WHERE referral = ?");
                        $stmt->bind_param("s", $refcode);
                        $stmt->execute();
                        $result = $stmt->get_result();

                        if ($result->num_rows > 0) {
                            while ($row = $result->fetch_assoc()) {
                                ?>
                                <tr>
                                    <td class="px-2 py-3"><?php echo date("Y-m-d H:i:s", strtotime($row['date'])); ?></td>
                                    <td class="px-2 py-3"><?php echo htmlspecialchars($row['fname'] . " " . $row['lname']); ?></td>
                                    <td class="px-2 py-3"><?php echo htmlspecialchars($row['email']); ?></td>
                                    <td class="px-2 py-3"><?php echo htmlspecialchars($row['phone']); ?></td>
                                    <td class="px-2 py-3"><?php echo date("Y-m-d", strtotime($row['date'])); ?></td>
                                    <td class="px-2 py-3">
                                        <?php
                                        if ($row['status'] == 'active') {
                                            echo '<span class="text-green-500 font-semibold">Active</span>';
                                        } else {
                                            echo '<span class="text-red-500 font-semibold">Inactive</span>';
                                        }
                                        ?>
                                    </td>
                                </tr>
                                <?php
                            }
                        } else {
                            echo '<tr><td colspan="6" class="px-2 py-3 text-center text-gray-500">No referrals found</td></tr>';
                        }

            
      
                    ?>
                </tbody>
            </table>
              </div>
              <div>
                <div x-ref="wrapper"></div>
              </div>
            </div>
          </div>
        </div>

      </div>

    </main>


<?php
include 'footer.php'
?>