@extends('admin.layout.app')
@section('content')
    <!-- Content -->
    <main class="grow pt-5" id="content" role="content">
        <!-- Container -->
        <div class="kt-container-fixed" id="contentContainer">
        </div>

        <div class="kt-container-fixed">
            <div class="grid gap-5 lg:gap-7.5">
                <div class="kt-card kt-card-grid min-w-full">
                    <div class="kt-card-header flex-wrap gap-2">
                        <h3 class="kt-card-title text-sm">
                            Total {{$socialLinks->count()}} {{$name}}
                        </h3>

                        <div class="flex flex-wrap gap-2 lg:gap-5">
                            <div class="mb-3">
                                <select id="platform-select" class="kt-input" required>
                                    <option value="">-- Select Platform --</option>
                                    <option value="LinkedIn" @if($name === 'LinkedIn') selected @endif data-icon="fab fa-linkedin-in">LinkedIn</option>
                                    <option value="Facebook" @if($name === 'Facebook') selected @endif data-icon="fab fa-facebook-f">Facebook</option>
                                    <option value="Twitter" @if($name === 'Twitter') selected @endif data-icon="fab fa-twitter">Twitter</option>
                                    <option value="Instagram" @if($name === 'Instagram') selected @endif data-icon="fab fa-instagram">Instagram</option>
                                    <option value="Youtube" @if($name === 'Youtube') selected @endif data-icon="fab fa-youtube">YouTube</option>
                                    <option value="Google+" @if($name === 'Google+') selected @endif data-icon="fab fa-google-plus-square">Google+</option>
                                    <option value="Behance" @if($name === 'Behance') selected @endif data-icon="fab fa-behance-square">Behance</option>
                                    <option value="Pinterest" @if($name === 'Pinterest') selected @endif data-icon="fab fa-pinterest">Pinterest</option>
                                    <option value="Website" @if($name === 'Website') selected @endif data-icon="fas fa-globe-americas">Website</option>
                                </select>
                            </div>
                            <div class="flex">

                                <label class="kt-input">
                                    <i class="ki-filled ki-magnifier"></i>
                                    <input id="search-input" placeholder="Search marketplaces" type="text" value=""/>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="kt-card-content">
                        <div class="grid" data-kt-datatable="false" data-kt-datatable-page-size="10">
                            <div class="kt-scrollable-x-auto">
                                @if($socialLinks->isEmpty())
                                    <div style="display: flex; justify-content: center">
                                        <lable class="justify-content-center"> No Social Link Found!</lable>
                                    </div>
                                @else
                                    <table class="kt-table table-auto kt-table-border" data-kt-datatable-table="false">
                                        <thead>
                                        <tr>

                                            <th class="min-w-[250px]">
               <span class="kt-table-col">
                <span class="kt-table-col-label">
                 Profile
                </span>
                <span class="kt-table-col-sort">
                </span>
               </span>
                                            </th>

                                            <th class="min-w-[150px]">
               <span class="kt-table-col">
                <span class="kt-table-col-label">
                 Link
                </span>
                <span class="kt-table-col-sort">
                </span>
               </span>
                                            </th>

                                            <th class="w-[60px]">
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody id="posts-table-body">

                                        @foreach($socialLinks as $link)

                                            <tr class="post-row">
                                                <td>
                                                    <div class="flex items-center gap-2.5">
                                                        <img alt="" class="rounded-full size-7 shrink-0"
                                                             src="{{asset($link->user->getFirstMediaURL('profile_image') ?? '')}}"/>
                                                        <div class="flex flex-col">
                                                            <a class="text-sm font-medium text-mono hover:text-primary mb-px"
                                                               href="#">
                                                                {{$link->user->name ?? ''}}
                                                            </a>
                                                            <span class="text-sm text-secondary-foreground font-normal">
                {{$link->user->title ?? ''}}
                 </span>
                                                        </div>
                                                    </div>
                                                </td>

                                                <td>{{$link->url ?? '' }}</td>
                                                <td class="text-center">
                                                    <div class="kt-menu flex-inline" data-kt-menu="true">
                                                        <div class="kt-menu-item" data-kt-menu-item-offset="0, 10px"
                                                             data-kt-menu-item-placement="bottom-end"
                                                             data-kt-menu-item-placement-rtl="bottom-start"
                                                             data-kt-menu-item-toggle="dropdown"
                                                             data-kt-menu-item-trigger="click">
                                                            <button
                                                                class="kt-menu-toggle kt-btn kt-btn-sm kt-btn-icon kt-btn-ghost">
                                                                <i class="ki-filled ki-dots-vertical text-lg">
                                                                </i>
                                                            </button>
                                                            <div
                                                                class="kt-menu-dropdown kt-menu-default w-full max-w-[175px]"
                                                                data-kt-menu-dismiss="true">
                                                                <div class="kt-menu-item">
                                                                    <a class="kt-menu-link" href="#">
                    <span class="kt-menu-icon">
                     <i class="ki-filled ki-search-list">
                     </i>
                    </span>
                                                                        <span class="kt-menu-title">
                     View
                    </span>
                                                                    </a>
                                                                </div>
                                                                <div class="kt-menu-item">
                                                                    <a class="kt-menu-link" href="#">
                    <span class="kt-menu-icon">
                     <i class="ki-filled ki-file-up">
                     </i>
                    </span>
                                                                        <span class="kt-menu-title">
                     Export
                    </span>
                                                                    </a>
                                                                </div>
                                                                <div class="kt-menu-separator">
                                                                </div>
                                                                <div class="kt-menu-item">
                                                                    <a class="kt-menu-link" href="#">
                    <span class="kt-menu-icon">
                     <i class="ki-filled ki-pencil">
                     </i>
                    </span>
                                                                        <span class="kt-menu-title">
                     Edit
                    </span>
                                                                    </a>
                                                                </div>
                                                                <div class="kt-menu-item">
                                                                    <a class="kt-menu-link" href="#">
                    <span class="kt-menu-icon">
                     <i class="ki-filled ki-copy">
                     </i>
                    </span>
                                                                        <span class="kt-menu-title">
                     Make a copy
                    </span>
                                                                    </a>
                                                                </div>
                                                                <div class="kt-menu-separator">
                                                                </div>
                                                                <div class="kt-menu-item">
                                                                    <a class="kt-menu-link" href="#">
                    <span class="kt-menu-icon">
                     <i class="ki-filled ki-trash">
                     </i>
                    </span>
                                                                        <span class="kt-menu-title">
                     Remove
                    </span>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach

                                        </tbody>
                                    </table>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div
                        class="kt-card-footer justify-center md:justify-between flex-col md:flex-row gap-5 text-secondary-foreground text-sm font-medium">
                        <div class="flex items-center gap-2 order-2 md:order-1">
                            Show
                            <select class="kt-select w-16" id="per-page-select" data-kt-datatable-size="false"
                                    name="perpage">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                            per page
                        </div>

                        <div class="flex items-center gap-4 order-1 md:order-2">
        <span id="data-info" data-kt-datatable-info="false">
            Showing 1 to 10 of 100 entries
        </span>

                            <div class="kt-datatable-pagination" data-kt-datatable-pagination="false">
                                <button id="prev-page" class="kt-btn kt-btn-sm kt-btn-light" disabled>Previous</button>
                                <span id="page-number">1</span> of <span id="total-pages">10</span>
                                <button id="next-page" class="kt-btn kt-btn-sm kt-btn-light">Next</button>
                            </div>
                        </div>
                    </div>

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

        <!-- End of Container -->
    </main>
    <!-- End of Content -->
@endsection
@push('script')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const searchInput = document.getElementById("search-input");
            const tableBody = document.getElementById("posts-table-body");
            const tableRows = tableBody.querySelectorAll(".post-row");

            const perPageSelect = document.getElementById("per-page-select");
            const prevPageButton = document.getElementById("prev-page");
            const nextPageButton = document.getElementById("next-page");
            const pageNumberElement = document.getElementById("page-number");
            const totalPagesElement = document.getElementById("total-pages");
            const dataInfoElement = document.getElementById("data-info");

            let currentPage = 1;
            let perPage = parseInt(perPageSelect.value);
            let totalItems = tableRows.length; // Get total items from table rows
            let totalPages = Math.ceil(totalItems / perPage);

            // Update the displayed pagination information
            function updatePaginationInfo() {
                const start = (currentPage - 1) * perPage + 1;
                const end = Math.min(currentPage * perPage, totalItems);
                dataInfoElement.textContent = `Showing ${start} to ${end} of ${totalItems} entries`;

                pageNumberElement.textContent = currentPage;
                totalPagesElement.textContent = totalPages;

                prevPageButton.disabled = currentPage === 1;
                nextPageButton.disabled = currentPage === totalPages;
            }

            // Handle "Previous" button click
            prevPageButton.addEventListener("click", function () {
                if (currentPage > 1) {
                    currentPage--;
                    updatePaginationInfo();
                    loadPageData();
                }
            });

            // Handle "Next" button click
            nextPageButton.addEventListener("click", function () {
                if (currentPage < totalPages) {
                    currentPage++;
                    updatePaginationInfo();
                    loadPageData();
                }
            });

            // Handle "Per Page" change
            perPageSelect.addEventListener("change", function () {
                perPage = parseInt(perPageSelect.value);
                totalPages = Math.ceil(totalItems / perPage);
                currentPage = 1; // Reset to first page
                updatePaginationInfo();
                loadPageData();
            });

            // Search functionality
            searchInput.addEventListener("input", function () {
                const query = searchInput.value.toLowerCase();

                // Loop through all the table rows and hide/show based on search query
                tableRows.forEach(row => {
                    const company = row.querySelector("td:nth-child(1)").textContent.toLowerCase();
                    const name = row.querySelector("td:nth-child(2)").textContent.toLowerCase();
                    const title = row.querySelector("td:nth-child(3)").textContent.toLowerCase();
                    const email = row.querySelector("td:nth-child(4)").textContent.toLowerCase();
                    const phone = row.querySelector("td:nth-child(5)").textContent.toLowerCase();

                    // Check if the query matches any column (company, name, title, email, phone)
                    if (company.includes(query) || name.includes(query) || title.includes(query) || email.includes(query) || phone.includes(query)) {
                        row.style.display = ""; // Show the row if it matches
                    } else {
                        row.style.display = "none"; // Hide the row if it doesn't match
                    }
                });

                // Recalculate total items after search filtering
                totalItems = tableBody.querySelectorAll("tr:visible").length;
                totalPages = Math.ceil(totalItems / perPage);
                currentPage = 1; // Reset to first page after filtering
                updatePaginationInfo();
            });

            // Load data for the current page (simulate dynamic data loading)
            function loadPageData() {
                const startIndex = (currentPage - 1) * perPage;
                const endIndex = startIndex + perPage;

                tableRows.forEach((row, index) => {
                    if (index >= startIndex && index < endIndex) {
                        row.style.display = ""; // Show row if it is within the range
                    } else {
                        row.style.display = "none"; // Hide row if it is outside the range
                    }
                });
            }

            // Initial call to update the page info and load the first page
            updatePaginationInfo();
            loadPageData();
        });


        document.getElementById('platform-select').addEventListener('change', function () {
            const selectedPlatform = this.value;
            const selectedIcon = this.options[this.selectedIndex].getAttribute('data-icon');
            const selectedName = this.options[this.selectedIndex].text;  // This gets the name (e.g., "LinkedIn", "Facebook", etc.)

            if (selectedPlatform) {
                // Construct the URL with selected platform (icon and name as parameters)
                const url = `{{asset('/social/index/')}}/${selectedIcon}/${encodeURIComponent(selectedName)}`;
                this.value = selectedPlatform;
                // Redirect to the URL (this will reload the page)
                window.location.href = url;

            }
        });


    </script>
@endpush