<?php $pageTitle = 'Hostinglerim'; ?>
<?php echo $__env->make("layouts.header", \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<style media="screen">
  .icon {width: 20px;fill:white;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
    th {
        cursor: pointer;
        user-select: none;
        position: relative;
    }

    th .sort-icon {
        margin-left: 5px;
    }

    th.sort-asc .sort-icon::after {
        content: "▲";
    }

    th.sort-desc .sort-icon::after {
        content: "▼";
    }
    .dark .product-active{
      background-color: hsla(0, 0%, 100%, .05);
    }
    .light .product-active{
      background-color: hsl(0deg 100% 7.42% / 7%);
    }
</style>
<main class="fi-main mx-auto h-full w-full px-4 md:px-6 lg:px-8 max-w-screen-2xl">
    <div class="fi-page fi-dashboard-page">
        <section class="flex flex-col gap-y-8 py-8">
            <header class="fi-header flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h1 class="fi-header-heading text-2xl font-bold tracking-tight text-gray-950 dark:text-white sm:text-3xl">
                        Hostinglerim
                    </h1>
                </div>
            </header>
            <div class="">
              <?php
              $all_sayac = 0;
              $active_sayac = 0;
              $Expired_sayac = 0;
              $Terminated_sayac = 0;
              $Cancelled_sayac = 0;
              $Pending_sayac = 0;
              $Grace_sayac = 0;
               ?>
              <?php foreach ($hostingProducts as $product): ?>
                <?php
                $all_sayac++;
                if ($product['status'] == "Active") {
                  $active_sayac++;
                }
                if ($product['status'] == "Suspended") {
                  $Expired_sayac++;
                }
                if ($product['status'] == "Terminated") {
                  $Terminated_sayac++;
                }
                if ($product['status'] == "Cancelled") {
                  $Cancelled_sayac++;
                }
                if ($product['status'] == "Pending") {
                  $Pending_sayac++;
                }
                ?>
              <?php endforeach; ?>
              <div class="flex flex-col gap-y-6" style="margin-bottom:25px;">
                <nav class="fi-tabs flex max-w-full gap-x-1 overflow-x-auto mx-auto rounded-xl bg-white p-2 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10" role="tablist">
              <a href="hostings" class="<?php echo (!isset($_GET['status']) || $_GET['status'] == null) ? 'product-active' : ''; ?> fi-tabs-item group flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
                <svg
                class="fi-tabs-item-icon h-5 w-5 shrink-0 transition duration-75 text-gray-400 dark:text-gray-500"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                data-slot="icon"
                >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
                ></path>
                </svg>
                <span class="fi-tabs-item-label transition duration-75 text-gray-500 group-hover:text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 dark:group-focus-visible:text-gray-200">
                Tümü
                </span>
                <span
                style="--c-50: var(--primary-50); --c-400: var(--primary-400); --c-600: var(--primary-600);"
                class="fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium ring-1 ring-inset px-1.5 min-w-[theme(spacing.5)] py-0.5 tracking-tight fi-color-custom bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30 fi-color-primary w-max"
                >
                <span class="grid">
                    <span class="truncate">
                        <?php echo $all_sayac; ?>
                    </span>
                </span>
                </span>
              </a>
              <a href="?status=Active" class="<?php echo (isset($_GET['status']) && $_GET['status'] == "Active") ? 'product-active' : ''; ?> fi-tabs-item group flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
                <svg
                class="fi-tabs-item-icon h-5 w-5 shrink-0 transition duration-75 text-gray-400 dark:text-gray-500"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                data-slot="icon"
                >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
                ></path>
                </svg>
                <span class="fi-tabs-item-label transition duration-75 text-gray-500 group-hover:text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 dark:group-focus-visible:text-gray-200">
                Aktif
                </span>
                <span
                style="--c-50: var(--primary-50); --c-400: var(--primary-400); --c-600: var(--primary-600);"
                class="fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium ring-1 ring-inset px-1.5 min-w-[theme(spacing.5)] py-0.5 tracking-tight fi-color-custom bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30 fi-color-primary w-max"
                >
                <span class="grid">
                    <span class="truncate">
                        <?php echo $active_sayac; ?>
                    </span>
                </span>
                </span>
              </a>
              <a href="?status=Suspended" class="<?php echo (isset($_GET['status']) && $_GET['status'] == "Expired") ? 'product-active' : ''; ?> fi-tabs-item group flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
                <svg
                class="fi-tabs-item-icon h-5 w-5 shrink-0 transition duration-75 text-gray-400 dark:text-gray-500"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                data-slot="icon"
                >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
                ></path>
                </svg>
                <span class="fi-tabs-item-label transition duration-75 text-gray-500 group-hover:text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 dark:group-focus-visible:text-gray-200">
                Askıya Alındı
                </span>
                <span
                style="--c-50: var(--primary-50); --c-400: var(--primary-400); --c-600: var(--primary-600);"
                class="fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium ring-1 ring-inset px-1.5 min-w-[theme(spacing.5)] py-0.5 tracking-tight fi-color-custom bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30 fi-color-primary w-max"
                >
                <span class="grid">
                    <span class="truncate">
                        <?php echo $Expired_sayac; ?>
                    </span>
                </span>
                </span>
              </a>

              <a href="?status=Terminated" class="<?php echo (isset($_GET['status']) && $_GET['status'] == "Terminated") ? 'product-active' : ''; ?> fi-tabs-item group flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
                <svg
                class="fi-tabs-item-icon h-5 w-5 shrink-0 transition duration-75 text-gray-400 dark:text-gray-500"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                data-slot="icon"
                >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
                ></path>
                </svg>
                <span class="fi-tabs-item-label transition duration-75 text-gray-500 group-hover:text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 dark:group-focus-visible:text-gray-200">
                Kapatıldı
                </span>
                <span
                style="--c-50: var(--primary-50); --c-400: var(--primary-400); --c-600: var(--primary-600);"
                class="fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium ring-1 ring-inset px-1.5 min-w-[theme(spacing.5)] py-0.5 tracking-tight fi-color-custom bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30 fi-color-primary w-max"
                >
                <span class="grid">
                    <span class="truncate">
                        <?php echo $Terminated_sayac; ?>
                    </span>
                </span>
                </span>
              </a>
              <a href="?status=Cancelled" class="<?php echo (isset($_GET['status']) && $_GET['status'] == "Cancelled") ? 'product-active' : ''; ?> fi-tabs-item group flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
                <svg
                class="fi-tabs-item-icon h-5 w-5 shrink-0 transition duration-75 text-gray-400 dark:text-gray-500"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                data-slot="icon"
                >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
                ></path>
                </svg>
                <span class="fi-tabs-item-label transition duration-75 text-gray-500 group-hover:text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 dark:group-focus-visible:text-gray-200">
                İptal Edildi
                </span>
                <span
                style="--c-50: var(--primary-50); --c-400: var(--primary-400); --c-600: var(--primary-600);"
                class="fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium ring-1 ring-inset px-1.5 min-w-[theme(spacing.5)] py-0.5 tracking-tight fi-color-custom bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30 fi-color-primary w-max"
                >
                <span class="grid">
                    <span class="truncate">
                        <?php echo $Cancelled_sayac; ?>
                    </span>
                </span>
                </span>
              </a>

              <a href="?status=Pending" class="<?php echo (isset($_GET['status']) && $_GET['status'] == "Pending") ? 'product-active' : ''; ?> fi-tabs-item group flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
                <svg
                class="fi-tabs-item-icon h-5 w-5 shrink-0 transition duration-75 text-gray-400 dark:text-gray-500"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                data-slot="icon"
                >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
                ></path>
                </svg>
                <span class="fi-tabs-item-label transition duration-75 text-gray-500 group-hover:text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 dark:group-focus-visible:text-gray-200">
                  Beklemede
                </span>
                <span
                style="--c-50: var(--primary-50); --c-400: var(--primary-400); --c-600: var(--primary-600);"
                class="fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium ring-1 ring-inset px-1.5 min-w-[theme(spacing.5)] py-0.5 tracking-tight fi-color-custom bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30 fi-color-primary w-max"
                >
                <span class="grid">
                    <span class="truncate">
                        <?php echo $Pending_sayac; ?>
                    </span>
                </span>
                </span>
              </a>
              </nav>
              </div>
                <div class="grid flex-1 auto-cols-fr gap-y-8">
                    <div class="flex flex-col gap-y-6">
                        <div class="fi-ta">
                            <div class="fi-ta-ctn divide-y divide-gray-200 overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:divide-white/10 dark:bg-gray-900 dark:ring-white/10">
                                <div class="fi-ta-content relative divide-y divide-gray-200 overflow-x-auto dark:divide-white/10 dark:border-t-white/10">
                                    <table class="fi-ta-table w-full table-auto divide-y divide-gray-200 text-start dark:divide-white/5">
                                        <thead class="divide-y divide-gray-200 dark:divide-white/5">
                                            <tr class="bg-gray-50 dark:bg-white/5">
                                                <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-6 sm:last-of-type:pe-6 fi-table-header-cell-name" style="">
                                                    <span class="group flex w-full items-center gap-x-1 whitespace-nowrap justify-start">
                                                        <span class="fi-ta-header-cell-label text-sm font-semibold text-gray-950 dark:text-white">
                                                            Ürün / Hizmet <span class="sort-icon"></span>
                                                        </span>

                                                    </span>
                                                </th>

                                                <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-6 sm:last-of-type:pe-6 fi-table-header-cell-phones.phone-number" style="">
                                                    <span class="group flex w-full items-center gap-x-1 whitespace-nowrap justify-start">
                                                        <span class="fi-ta-header-cell-label text-sm font-semibold text-gray-950 dark:text-white">
                                                            Yenileme Ücreti <span class="sort-icon"></span>
                                                        </span>

                                                    </span>
                                                </th>

                                                <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-6 sm:last-of-type:pe-6 fi-table-header-cell-tax-number" style="">
                                                    <span class="group flex w-full items-center gap-x-1 whitespace-nowrap justify-start">
                                                        <span class="fi-ta-header-cell-label text-sm font-semibold text-gray-950 dark:text-white">
                                                            Yenileme Tarihi <span class="sort-icon"></span>
                                                        </span>

                                                    </span>
                                                </th>

                                                <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-6 sm:last-of-type:pe-6 fi-table-header-cell-tax-office" style="">
                                                    <span class="group flex w-full items-center gap-x-1 whitespace-nowrap justify-start">
                                                        <span class="fi-ta-header-cell-label text-sm font-semibold text-gray-950 dark:text-white">
                                                            Durum <span class="sort-icon"></span>
                                                        </span>

                                                    </span>
                                                </th>

                                                <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-6 sm:last-of-type:pe-6 fi-table-header-cell-country.name" style="">
                                                    <span class="group flex w-full items-center gap-x-1 whitespace-nowrap justify-start">
                                                        <span class="fi-ta-header-cell-label text-sm font-semibold text-gray-950 dark:text-white">
                                                            İşlemler <span class="sort-icon"></span>
                                                        </span>

                                                    </span>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody id="table-body" class="divide-y divide-gray-200 whitespace-nowrap dark:divide-white/5">
                                          <?php if (!empty($hostingProducts)): ?>
                                            <?php $noProductDisplayed = false; ?>
                                            <?php $__currentLoopData = $hostingProducts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <?php if (isset($_GET['status'])): ?>
                                              <?php if ($product['status'] == $_GET['status']): ?>
                                                <?php $noProductDisplayed = true; ?>
                                                <tr>
                                                    <td
                                                        class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-name"
                                                        wire:key="SjCoX8HBR4B7mAPAj0Qf.table.record.<?php echo e($loop->index); ?>.column.name"
                                                    >
                                                        <div class="fi-ta-col-wrp">
                                                            <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4">
                                                                <div class="flex">
                                                                    <div class="flex max-w-max" style="">
                                                                        <div class="fi-ta-text-item inline-flex items-center gap-1.5">
                                                                            <span class="fi-ta-text-item-label text-sm leading-6 text-gray-950 dark:text-white font-medium" style="">
                                                                                <?php echo e($product['domain']); ?>

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

                                                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                                                    <?php echo str_replace("-", " ", $product['name']); ?>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td
                                                        class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-name"
                                                        wire:key="SjCoX8HBR4B7mAPAj0Qf.table.record.<?php echo e($loop->index); ?>.column.name"
                                                    >
                                                        <div class="fi-ta-col-wrp">
                                                            <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4">
                                                                <div class="flex">
                                                                    <div class="flex max-w-max" style="">
                                                                        <div class="fi-ta-text-item inline-flex items-center gap-1.5">
                                                                            <span class="fi-ta-text-item-label text-sm leading-6 text-gray-950 dark:text-white font-medium" style="">
                                                                                 $<?php echo e($product['firstpaymentamount']); ?>

                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td
                                                        class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-name"
                                                        wire:key="SjCoX8HBR4B7mAPAj0Qf.table.record.<?php echo e($loop->index); ?>.column.name"
                                                    >
                                                        <div class="fi-ta-col-wrp">
                                                            <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4">
                                                                <div class="flex">
                                                                    <div class="flex max-w-max" style="">
                                                                        <div class="fi-ta-text-item inline-flex items-center gap-1.5">
                                                                            <span class="fi-ta-text-item-label text-sm leading-6 text-gray-950 dark:text-white font-medium" style="">
                                                                                <?php echo date_format(date_create($product['nextduedate']), "d/m/Y") ?>
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td
                                                        class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-name"
                                                        wire:key="SjCoX8HBR4B7mAPAj0Qf.table.record.<?php echo e($loop->index); ?>.column.name"
                                                    >
                                                        <div class="fi-ta-col-wrp">
                                                            <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4">
                                                                <div class="flex">
                                                                    <div class="flex max-w-max" style="">
                                                                        <div class="fi-ta-text-item inline-flex items-center gap-1.5">
                                                                            <span class="fi-ta-text-item-label text-sm leading-6 text-gray-950 dark:text-white font-medium" style="">
                                                                                <?php

                                            if ($product['status'] == "Active") {
                                              echo "Aktif";
                                            }
                                            if ($product['status'] == "Suspended") {
                                              echo "Askıya Alındı";
                                            }
                                            if ($product['status'] == "Terminated") {
                                              echo "Kapatıldı";
                                            }
                                            if ($product['status'] == "Cancelled") {
                                              echo "İptal Edildi";
                                            }
                                            if ($product['status'] == "Pending") {
                                              echo "Beklemede";
                                            }
                                             ?>
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td
                                                        class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-name"
                                                        wire:key="SjCoX8HBR4B7mAPAj0Qf.table.record.<?php echo e($loop->index); ?>.column.name"
                                                    >
                                                        <div class="fi-ta-col-wrp">
                                                            <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4">
                                                                <div class="flex">
                                                                    <div class="flex max-w-max" style="">
                                                                        <div class="fi-ta-text-item inline-flex items-center gap-1.5">
                                                                            <span class="fi-ta-text-item-label text-sm leading-6 text-gray-950 dark:text-white font-medium" style="">
                                                                                <a
                                                                                    style="--c-400: var(--primary-400); --c-500: var(--primary-500); --c-600: var(--primary-600);"
                                                                                    class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-custom fi-btn-color-primary fi-color-primary fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 focus-visible:ring-custom-500/50 dark:bg-custom-500 dark:hover:bg-custom-400 dark:focus-visible:ring-custom-400/50 fi-ac-action fi-ac-btn-action"
                                                                                    href="hostings/details/<?php echo e($product['id']); ?>"
                                                                                >
                                                                                    YÖNET
                                                                                </a>
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                              <?php endif; ?>
                                              <?php else: ?>
                                                  <?php $noProductDisplayed = true; ?>
                                                  <tr>
                                                      <td
                                                          class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-name"
                                                          wire:key="SjCoX8HBR4B7mAPAj0Qf.table.record.<?php echo e($loop->index); ?>.column.name"
                                                      >
                                                          <div class="fi-ta-col-wrp">
                                                              <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4">
                                                                  <div class="flex">
                                                                      <div class="flex max-w-max" style="">
                                                                          <div class="fi-ta-text-item inline-flex items-center gap-1.5">
                                                                              <span class="fi-ta-text-item-label text-sm leading-6 text-gray-950 dark:text-white font-medium" style="">
                                                                                  <?php echo e($product['domain']); ?>

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

                                                                  <p class="text-sm text-gray-500 dark:text-gray-400">
                                                                      <?php echo str_replace("-", " ", $product['name']); ?>
                                                                  </p>
                                                              </div>
                                                          </div>
                                                      </td>
                                                      <td
                                                          class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-name"
                                                          wire:key="SjCoX8HBR4B7mAPAj0Qf.table.record.<?php echo e($loop->index); ?>.column.name"
                                                      >
                                                          <div class="fi-ta-col-wrp">
                                                              <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4">
                                                                  <div class="flex">
                                                                      <div class="flex max-w-max" style="">
                                                                          <div class="fi-ta-text-item inline-flex items-center gap-1.5">
                                                                              <span class="fi-ta-text-item-label text-sm leading-6 text-gray-950 dark:text-white font-medium" style="">
                                                                                   $<?php echo e($product['firstpaymentamount']); ?>

                                                                              </span>
                                                                          </div>
                                                                      </div>
                                                                  </div>
                                                              </div>
                                                          </div>
                                                      </td>
                                                      <td
                                                          class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-name"
                                                          wire:key="SjCoX8HBR4B7mAPAj0Qf.table.record.<?php echo e($loop->index); ?>.column.name"
                                                      >
                                                          <div class="fi-ta-col-wrp">
                                                              <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4">
                                                                  <div class="flex">
                                                                      <div class="flex max-w-max" style="">
                                                                          <div class="fi-ta-text-item inline-flex items-center gap-1.5">
                                                                              <span class="fi-ta-text-item-label text-sm leading-6 text-gray-950 dark:text-white font-medium" style="">
                                                                                  <?php echo date_format(date_create($product['nextduedate']), "d/m/Y") ?>
                                                                              </span>
                                                                          </div>
                                                                      </div>
                                                                  </div>
                                                              </div>
                                                          </div>
                                                      </td>
                                                      <td
                                                          class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-name"
                                                          wire:key="SjCoX8HBR4B7mAPAj0Qf.table.record.<?php echo e($loop->index); ?>.column.name"
                                                      >
                                                          <div class="fi-ta-col-wrp">
                                                              <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4">
                                                                  <div class="flex">
                                                                      <div class="flex max-w-max" style="">
                                                                          <div class="fi-ta-text-item inline-flex items-center gap-1.5">
                                                                              <span class="fi-ta-text-item-label text-sm leading-6 text-gray-950 dark:text-white font-medium" style="">
                                                                                  <?php

                                              if ($product['status'] == "Active") {
                                                echo "Aktif";
                                              }
                                              if ($product['status'] == "Suspended") {
                                                echo "Askıya Alındı";
                                              }
                                              if ($product['status'] == "Terminated") {
                                                echo "Kapatıldı";
                                              }
                                              if ($product['status'] == "Cancelled") {
                                                echo "İptal Edildi";
                                              }
                                              if ($product['status'] == "Pending") {
                                                echo "Beklemede";
                                              }
                                               ?>
                                                                              </span>
                                                                          </div>
                                                                      </div>
                                                                  </div>
                                                              </div>
                                                          </div>
                                                      </td>
                                                      <td
                                                          class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-name"
                                                          wire:key="SjCoX8HBR4B7mAPAj0Qf.table.record.<?php echo e($loop->index); ?>.column.name"
                                                      >
                                                          <div class="fi-ta-col-wrp">
                                                              <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4">
                                                                  <div class="flex">
                                                                      <div class="flex max-w-max" style="">
                                                                          <div class="fi-ta-text-item inline-flex items-center gap-1.5">
                                                                              <span class="fi-ta-text-item-label text-sm leading-6 text-gray-950 dark:text-white font-medium" style="">
                                                                                  <a
                                                                                      style="--c-400: var(--primary-400); --c-500: var(--primary-500); --c-600: var(--primary-600);"
                                                                                      class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-custom fi-btn-color-primary fi-color-primary fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 focus-visible:ring-custom-500/50 dark:bg-custom-500 dark:hover:bg-custom-400 dark:focus-visible:ring-custom-400/50 fi-ac-action fi-ac-btn-action"
                                                                                      href="hostings/details/<?php echo e($product['id']); ?>"
                                                                                  >
                                                                                      YÖNET
                                                                                  </a>
                                                                              </span>
                                                                          </div>
                                                                      </div>
                                                                  </div>
                                                              </div>
                                                          </div>
                                                      </td>
                                                  </tr>

                                            <?php endif; ?>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            <?php if (!$noProductDisplayed): ?>
                                              <tr class="fi-ta-row [@media(hover:hover)]:transition [@media(hover:hover)]:duration-75">
                                                <td colspan="100" class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-certificate-type-id">
                                                  <div class="fi-ta-col-wrp">
                                                    <div class="flex w-full disabled:pointer-events-none justify-center items-center text-center">
                                                      <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4">
                                                        <p style="text-align:center;font-size: 17px; width: 100%;" class="text-sm text-gray-500 dark:text-gray-400">
                                                          Herhangi bir hosting hizmetiniz bulunmamaktadır.
                                                        </p>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </td>
                                              </tr>
                                            <?php endif; ?>
                                          <?php else: ?>
                                            <tr class="fi-ta-row [@media(hover:hover)]:transition [@media(hover:hover)]:duration-75">
                                              <td colspan="100" class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-certificate-type-id">
                                                <div class="fi-ta-col-wrp">
                                                  <div class="flex w-full disabled:pointer-events-none justify-center items-center text-center">
                                                    <div class="fi-ta-text grid w-full gap-y-1 px-3 py-4">
                                                      <p style="text-align:center;font-size: 17px; width: 100%;" class="text-sm text-gray-500 dark:text-gray-400">
                                                        Herhangi bir hosting hizmetiniz bulunmamaktadır.
                                                      </p>
                                                    </div>
                                                  </div>
                                                </div>
                                              </td>
                                            </tr>
                                          <?php endif; ?>
                                        </tbody>
                                    </table>
                                </div>
                                <nav role="navigation" class="fi-pagination grid grid-cols-[1fr_auto_1fr] items-center gap-x-3 fi-ta-pagination px-3 py-3 sm:px-6">
                                  <span id="pagination-overview" class="fi-pagination-overview text-sm font-medium text-gray-700 dark:text-gray-200"></span>
                                  <div class="col-start-2 justify-self-center">
                                    <label class="fi-pagination-records-per-page-select">
                                      <div  class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&amp;:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&amp;:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&amp;:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
                                        <div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
                                          <span class="fi-input-wrp-label whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                            sayfa başına
                                          </span>
                                        </div>
                                        <div class="min-w-0 flex-1">
                                          <select id="records-per-page" class="fi-select-input block w-full border-none bg-transparent py-1.5 pe-8 text-base text-gray-950 transition duration-75 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] dark:text-white dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] sm:text-sm sm:leading-6 [&amp;_optgroup]:bg-white [&amp;_optgroup]:dark:bg-gray-900 [&amp;_option]:bg-white [&amp;_option]:dark:bg-gray 900 ps-3">
                                            <option value="10">10</option>
                                            <option value="25">25</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                          </select>
                                        </div>
                                      </div>
                                    </label>
                                  </div>
                                  <div class="pagination" id="pagination-controls"></div>
                                  <div class="col-span-full sm:hidden flex justify-between items-center mt-3">
                                    <button id="mobile-prev-btn" class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-white px-4 py-2 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed">
                                      Önceki
                                    </button>

                                    <select id="mobile-records-per-page" class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-white px-4 py-2 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">
                                      <option value="10">10</option>
                                      <option value="25">25</option>
                                      <option value="50">50</option>
                                      <option value="100">100</option>
                                    </select>

                                    <button id="mobile-next-btn" class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-white px-4 py-2 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed">
                                      Sonraki
                                    </button>
                                  </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</main>

<script>
document.getElementById("records-per-page").addEventListener("change", function () {
    rowsPerPage = parseInt(this.value); // Yeni değeri al ve güncelle
    currentPage = 1; // Sayfayı yeniden başlat
    renderTable(currentPage); // Tabloyu güncelle
    renderPagination(); // Sayfalama düğmelerini güncelle
});
    let rowsPerPage = parseInt(document.getElementById("records-per-page").value);
    let currentPage = 1;

    // Tablo satırlarını ve sayfalama düğmelerini ayarla
    function renderTable(page) {
        const rows = document.querySelectorAll("#table-body tr");
        const totalRows = rows.length;
        const start = (page - 1) * rowsPerPage;
        const end = start + rowsPerPage;

        rows.forEach((row, index) => {
            row.style.display = index >= start && index < end ? "table-row" : "none";
        });

        updateOverview();
    }

      function updateOverview() {
        const rows = document.querySelectorAll("#table-body tr");
        const totalRows = rows.length;
        const start = (currentPage - 1) * rowsPerPage + 1;
        const end = Math.min(start + rowsPerPage - 1, totalRows);

        const overviewText = `Toplam ${totalRows} sonuçtan ${start} ile ${end} arası görüntüleniyor`;
        document.getElementById("pagination-overview").textContent = overviewText;
      }

    function renderPagination() {
        const rows = document.querySelectorAll("#table-body tr");
        const pageCount = Math.ceil(rows.length / rowsPerPage);
        const paginationControls = document.getElementById("pagination-controls");
        paginationControls.innerHTML = "";

        // <ol> yapısı
        const ol = document.createElement("ol");
        ol.className =
            "fi-pagination-items justify-self-end rounded-lg bg-white shadow-sm ring-1 ring-gray-950/10 dark:bg-white/5 dark:ring-white/20";

        // Önceki butonu
        const prevLi = document.createElement("li");
        prevLi.className =
            "fi-pagination-item group/item border-x-[0.5px] border-gray-200 first:border-s-0 last:border-e-0 dark:border-white/10";
        const prevButton = document.createElement("button");
        prevButton.type = "button";
        prevButton.ariaLabel = "Önceki";
        prevButton.innerHTML = `
            <svg class="fi-pagination-item-icon h-5 w-5 text-gray-400 transition duration-75 group-hover/button:text-gray-500 dark:text-gray-500 dark:group-hover/button:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"></path>
            </svg>`;
        prevButton.className =
            "fi-pagination-item-button group/button relative flex overflow-hidden p-2 outline-none transition duration-75 group-first/item:rounded-s-lg group-last/item:rounded-e-lg hover:bg-gray-50 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-primary-600 dark:hover:bg-white/5 dark:focus-visible:ring-primary-500";
        prevButton.addEventListener("click", () => {
            if (currentPage > 1) {
                currentPage--;
                renderTable(currentPage);
                renderPagination();
            }
        });
        prevLi.appendChild(prevButton);
        ol.appendChild(prevLi);

        // Sayfa numaraları
        for (let i = 1; i <= pageCount; i++) {
            const li = document.createElement("li");
            li.className =
                "fi-pagination-item group/item border-x-[0.5px] border-gray-200 first:border-s-0 last:border-e-0 dark:border-white/10";
            if (i === currentPage) {
                li.classList.add("fi-active");
            }

            const button = document.createElement("button");
            button.type = "button";
            button.ariaLabel = `${i}. sayfaya git`;
            button.className =
                "fi-pagination-item-button group/button relative flex overflow-hidden p-2 outline-none transition duration-75 group-first/item:rounded-s-lg group-last/item:rounded-e-lg hover:bg-gray-50 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-primary-600 dark:hover:bg-white/5 dark:focus-visible:ring-primary-500";
            button.innerHTML = `<span class="fi-pagination-item-label px-1.5 text-sm font-semibold ${
                i === currentPage
                    ? "text-primary-600 dark:text-primary-400"
                    : "text-gray-700 dark:text-gray-200"
            }">${i}</span>`;
            button.addEventListener("click", () => {
                currentPage = i;
                renderTable(currentPage);
                renderPagination();
            });
            li.appendChild(button);
            ol.appendChild(li);
        }

        // Sonraki butonu
        const nextLi = document.createElement("li");
        nextLi.className =
            "fi-pagination-item group/item border-x-[0.5px] border-gray-200 first:border-s-0 last:border-e-0 dark:border-white/10";
        const nextButton = document.createElement("button");
        nextButton.type = "button";
        nextButton.ariaLabel = "Sonraki";
        nextButton.innerHTML = `
            <svg class="fi-pagination-item-icon h-5 w-5 text-gray-400 transition duration-75 group-hover/button:text-gray-500 dark:text-gray-500 dark:group-hover/button:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path>
            </svg>`;
        nextButton.className =
            "fi-pagination-item-button group/button relative flex overflow-hidden p-2 outline-none transition duration-75 group-first/item:rounded-s-lg group-last/item:rounded-e-lg hover:bg-gray-50 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-primary-600 dark:hover:bg-white/5 dark:focus-visible:ring-primary-500";
        nextButton.addEventListener("click", () => {
            if (currentPage < pageCount) {
                currentPage++;
                renderTable(currentPage);
                renderPagination();
            }
        });
        nextLi.appendChild(nextButton);
        ol.appendChild(nextLi);

        paginationControls.appendChild(ol);
    }

    function initPagination() {
        renderTable(currentPage);
        renderPagination();
    }

    initPagination();
    // Mobil butonları seç
    const mobilePrevBtn = document.getElementById("mobile-prev-btn");
    const mobileNextBtn = document.getElementById("mobile-next-btn");

    const mobileRecordsPerPage = document.getElementById("mobile-records-per-page");

    // Mobil Select olay dinleyicisi
    mobileRecordsPerPage.addEventListener("change", function () {
      rowsPerPage = parseInt(this.value); // Yeni değeri al ve güncelle
      document.getElementById("records-per-page").value = this.value; // Masaüstü select ile senkronize et
      currentPage = 1; // Sayfayı yeniden başlat
      renderTable(currentPage); // Tabloyu güncelle
      renderPagination(); // Sayfalama düğmelerini güncelle
      updateMobileButtons(); // Mobil butonları güncelle
    });

    // Masaüstü Select ile Mobil Select'i senkronize et
    document.getElementById("records-per-page").addEventListener("change", function () {
      mobileRecordsPerPage.value = this.value;
    });

    // Mobil butonları güncelleyen fonksiyon
    function updateMobileButtons() {
      const rows = document.querySelectorAll("#table-body tr");
      const pageCount = Math.ceil(rows.length / rowsPerPage);

      // "Önceki" butonu durumu
      mobilePrevBtn.disabled = currentPage === 1;

      // "Sonraki" butonu durumu
      mobileNextBtn.disabled = currentPage === pageCount;
    }

    // Mobil "Önceki" butonuna tıklama olayı
    mobilePrevBtn.addEventListener("click", () => {
      if (currentPage > 1) {
        currentPage--;
        renderTable(currentPage);
        renderPagination();
        updateMobileButtons();
      }
    });

    // Mobil "Sonraki" butonuna tıklama olayı
    mobileNextBtn.addEventListener("click", () => {
      const rows = document.querySelectorAll("#table-body tr");
      const pageCount = Math.ceil(rows.length / rowsPerPage);

      if (currentPage < pageCount) {
        currentPage++;
        renderTable(currentPage);
        renderPagination();
        updateMobileButtons();
      }
    });

    // Başlangıçta mobil butonları güncelle
    updateMobileButtons();

</script>
<script>
$(document).ready(function(){
    $("th").click(function(){
        var table = $(this).parents('table').eq(0);
        var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()));
        this.asc = !this.asc;
        if (!this.asc){rows = rows.reverse();}
        for (var i = 0; i < rows.length; i++){table.append(rows[i]);}

        // Tüm th öğelerinden sort-asc ve sort-desc sınıflarını kaldır
        $("th").removeClass("sort-asc sort-desc");

        // Tıklanan th öğesine sort-asc veya sort-desc sınıfını ekle
        if (this.asc) {
            $(this).addClass("sort-asc");
        } else {
            $(this).addClass("sort-desc");
        }
    });

    function comparer(index) {
        return function(a, b) {
            var valA = getCellValue(a, index), valB = getCellValue(b, index);
            if ($.isNumeric(valA) && $.isNumeric(valB)) {
                return valA - valB;
            } else {
                return valA.localeCompare(valB);
            }
        }
    }

    function getCellValue(row, index){
        var text = $(row).children('td').eq(index).text();
        // Yenileme Ücreti kolonundaki dolar işaretini kaldır ve sayıya çevir
        if (index === 1) {
            return parseFloat(text.replace(' $', ''));
        }
        return text;
    }
});
</script>




<?php echo $__env->make("layouts.footer", \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php /**PATH /home/ssplus/sspanel.serversistemleri.com/resources/views/hostings.blade.php ENDPATH**/ ?>