
<?php $pageTitle = 'E-Postalarım'; ?>
<?php echo $__env->make("layouts.header", \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<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">
                        E-Postalarım
                    </h1>
                </div>
            </header>
            <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">
                                                            Başlık
                                                        </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">
                                                            Tarih
                                                        </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">
                                                          Görüntüle
                                                        </span>
                                                    </span>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody id="table-body" class="divide-y divide-gray-200 whitespace-nowrap dark:divide-white/5">
                                          <?php //print_r($emails); ?>
                                          <?php foreach ($emails as $veri): ?>
                                            <tr class="email-row" style="display:none;">
                                              <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" 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 $veri->subject; ?>
                                                                          </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" 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="">
                                                                            <?= \Carbon\Carbon::parse($veri->date)->format('d/m/Y H:i') ?>
                                                                          </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" 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" target="_blank" href="email-detail/<?php echo $veri->id; ?>">GÖRÜNTÜLE</a>
                                                                          </span>
                                                                      </div>
                                                                  </div>
                                                              </div>
                                                          </div>
                                                  </div>
                                              </td>

                                          <?php endforeach; ?>

                                                                                                                                                                        </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>
    <script>
(function () {
    function initEmailPagination() {
        const rows = Array.from(document.querySelectorAll('tr.email-row'));
        if (!rows.length) return;

        const perPageSelect = document.getElementById('records-per-page');
        const mobilePerPageSelect = document.getElementById('mobile-records-per-page');

        const overview = document.getElementById('pagination-overview');
        const prevBtn = document.getElementById('mobile-prev-btn');
        const nextBtn = document.getElementById('mobile-next-btn');

        let currentPage = 1;
        let perPage = 10;

        // İlk açılışta 10 zorla
        if (perPageSelect) perPageSelect.value = '10';
        if (mobilePerPageSelect) mobilePerPageSelect.value = '10';

        function render() {
            const total = rows.length;
            const totalPages = Math.max(1, Math.ceil(total / perPage));
            currentPage = Math.min(currentPage, totalPages);

            const start = (currentPage - 1) * perPage;
            const end = start + perPage;

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

            if (overview) {
                overview.textContent = total
                    ? `${start + 1}-${Math.min(end, total)} / ${total}`
                    : `0 / 0`;
            }

            if (prevBtn) prevBtn.disabled = currentPage === 1;
            if (nextBtn) nextBtn.disabled = currentPage === totalPages;
        }

        function changePerPage(value) {
            perPage = parseInt(value, 10) || 10;
            currentPage = 1;
            render();
        }

        if (perPageSelect) {
            perPageSelect.addEventListener('change', e => {
                if (mobilePerPageSelect) mobilePerPageSelect.value = e.target.value;
                changePerPage(e.target.value);
            });
        }

        if (mobilePerPageSelect) {
            mobilePerPageSelect.addEventListener('change', e => {
                if (perPageSelect) perPageSelect.value = e.target.value;
                changePerPage(e.target.value);
            });
        }

        if (prevBtn) {
            prevBtn.addEventListener('click', () => {
                if (currentPage > 1) {
                    currentPage--;
                    render();
                }
            });
        }

        if (nextBtn) {
            nextBtn.addEventListener('click', () => {
                const totalPages = Math.max(1, Math.ceil(rows.length / perPage));
                if (currentPage < totalPages) {
                    currentPage++;
                    render();
                }
            });
        }

        render(); // ✅ ilk açılışta 10 göster
    }

    // DOM hazır olunca çalıştır
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initEmailPagination);
    } else {
        initEmailPagination();
    }
})();
</script>
</main>
<?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/emails.blade.php ENDPATH**/ ?>