<?php $pageTitle = 'Faturalarım'; ?>
@include("layouts.header")
<style media="screen">
  .icon {width: 20px;fill:white;}
  .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">
                        Faturalarım
                    </h1>
                </div>
            </header>
            <div>
              <?php
              $all_sayac = 0;
              $Paid_sayac = 0;
              $Cancelled_sayac = 0;
              $unpaid_sayac = 0;
              $efaturaInvoiceIds = collect($efatura)->pluck('invoiceId')->toArray();
              $efaturaData = collect($efatura)->keyBy('invoiceId');
               ?>
              <?php foreach ($servers['invoices']['invoice'] as $product): ?>
                <?php
                $all_sayac++;
                if ($product['status'] == "Paid") {
                  $Paid_sayac++;
                }
                if ($product['status'] == "Cancelled") {
                  $Cancelled_sayac++;
                }
                if ($product['status'] == "Unpaid") {
                  $unpaid_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="invoices" 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=Paid" 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">
                Ödendi
                </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 $Paid_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">
                Ödenmedi
                </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 $unpaid_sayac; ?>
                    </span>
                </span>
                </span>
              </a>

              <a href="?status=Cancelled" 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">
                İ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>


              </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">
                                                    <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">
                                                            Fatura Numarası
                                                        </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">
                                                    <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">
                                                            Tutar
                                                        </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">
                                                    <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">
                                                            Fatura Tarihi
                                                        </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">
                                                    <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">
                                                            Son Ödeme Tarihi
                                                        </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">
                                                    <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>
                                                    </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">
                                                    <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>
                                                    </span>
                                                </th>

                                            </tr>
                                        </thead>
                                        <tbody id="table-body" class="divide-y divide-gray-200 whitespace-nowrap dark:divide-white/5">
                                          <?php if (!empty($servers['invoices']['invoice'])): ?>
                                            <?php $noProductDisplayed = false; ?>
                                            @foreach ($servers['invoices']['invoice'] as $invoice)
                                            <?php if (isset($_GET['status'])): ?>
                                              <?php if ($invoice['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">
                                                      <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">
                                                                          <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">
                                                                                {{$invoice['id']}}
                                                                              </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">
                                                      <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">
                                                                          <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">
                                                                                ${{$invoice['total']}}
                                                                              </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">
                                                      <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">
                                                                          <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">
                                                                              <?php echo date_format(date_create($invoice['date']), "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">
                                                      <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">
                                                                          <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">
                                                                              <?php echo date_format(date_create($invoice['duedate']), "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">
                                                      <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">
                                                                          <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">
                                                                                <?php if ($invoice['status'] == "Unpaid"): ?>
                                                                                  Ödenmedi
                                                                                <?php endif; ?>
                                                                                <?php if ($invoice['status'] == "Cancelled"): ?>
                                                                                  İptal Edildi
                                                                                <?php endif; ?>
                                                                                <?php if ($invoice['status'] == "Paid"): ?>
                                                                                  Ödendi
                                                                                <?php endif; ?>
                                                                              </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">
                                                      <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">
                                                                          <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">

                                                                                  <a target="_blank" 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="invoices/view/{{$invoice['id']}}">GÖRÜNTÜLE</a>
                                                                                  <?php if (in_array($invoice['id'], $efaturaInvoiceIds)) { ?>
                                                                                    <?php $edmId = $efaturaData[$invoice['id']]->uuid; echo $edmId; ?>
                                                                                      <a target="_blank" 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="e-invoice/<?php echo $edmId; ?>">Resmi Fatura</a>
                                                                                  <?php } ?>
                                                                              </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">
                                                        <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">
                                                                            <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">
                                                                                  {{$invoice['id']}}
                                                                                </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">
                                                        <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">
                                                                            <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">
                                                                                  ${{$invoice['total']}}
                                                                                </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">
                                                        <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">
                                                                            <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">
                                                                                <?php echo date_format(date_create($invoice['date']), "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">
                                                        <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">
                                                                            <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">
                                                                                <?php echo date_format(date_create($invoice['duedate']), "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">
                                                        <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">
                                                                            <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">
                                                                                  <?php if ($invoice['status'] == "Unpaid"): ?>
                                                                                    Ödenmedi
                                                                                  <?php endif; ?>
                                                                                  <?php if ($invoice['status'] == "Cancelled"): ?>
                                                                                    İptal Edildi
                                                                                  <?php endif; ?>
                                                                                  <?php if ($invoice['status'] == "Paid"): ?>
                                                                                    Ödendi
                                                                                  <?php endif; ?>
                                                                                </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">
                                                        <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">
                                                                            <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">
                                                                                    <a target="_blank" 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="invoices/view/{{$invoice['id']}}">GÖRÜNTÜLE</a>

                                                                                    <?php if (in_array($invoice['id'], $efaturaInvoiceIds)) { ?>
                                                                                      <?php $edmId = $efaturaData[$invoice['id']]->uuid;?>
                                                                                        <a target="_blank" 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="e-invoice/<?php echo $edmId; ?>">Resmi Fatura</a>
                                                                                    <?php } ?>
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                        </div>
                                                    </td>
                                                  </tr>

                                            <?php endif; ?>
                                            @endforeach
                                            <?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 faturanız 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 faturanız 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>
@include("layouts.footer")
