@extends('layouts.app')
@section('content')
<div class="app sidebar-mini">
    <!-- Page -->
    <div class="page">
        <div class="page-main">
            <!-- App-Content -->
            <div class="app-content main-content">
                <div class="side-app">
                    <!--app header-->
                    @include('layouts.admin.appheader')
                    <!--/app header-->
                    <div class="containersection">
                        <!--Page header-->
                        <div class="page-header">
                            <div class="page-leftheader">
                            </div>
                            <div class="flashmsgec">
                                @include('layouts.flashmsg')
                            </div>
                            <div class="page-rightheader">
                            </div>
                        </div>
                        <!--End Page header-->

                        <div class="card carddivision">
                            <div class="row">
                                <!-- Side Menu Bar Start -->
                                <div class="ringimaimenubar col-lg-1 col-md-1 col-sm-1 col-xs-1">
                                    @include('layouts.admin.sidemenubar')
                                </div>
                                <!-- Side Menu Bar End -->
                                <!-- Main View Start -->
                                <div class="ringimaimain col-lg-11 col-md-11 col-sm-11 col-xs-11">
                                    <div class="row">
                                        <div class="cardleft col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="card carddivision">
                                                <div class="card-header mb-4">
                                                    <div class="card-title">Phone Numbers</div>
                                                </div>
                                                <div class="card-body cardbody">
                                                    <div id="table-wrapper" class="table-responsive commtlb">
                                                        <table class="table table-bordered text-nowrap tablelistingsec" id="example1">
                                                            <thead>
                                                                <tr>
                                                                    <th class="wd-15p border-bottom-0">Name</th>
                                                                    <th class="wd-15p border-bottom-0">Number</th>
                                                                    <th class="wd-15p border-bottom-0">Provider</th>
                                                                    <th class="wd-15p border-bottom-0">Assistant</th>
                                                                    <th class="wd-20p border-bottom-0">Status</th>
                                                                    <th class="wd-15p border-bottom-0">Created At</th>
                                                                    <th class="wd-10p border-bottom-0">Updated At</th>
                                                                    <th class="wd-10p border-bottom-0 text-center">Link Customer</th>
                                                                    <th class="wd-10p border-bottom-0 text-center">Assign Assistant</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @foreach ($numbers as $number)
                                                                <tr>
                                                                    <td>{{ isset($number['name']) && !empty($number['name']) ? $number['name'] : 'Unlabeled' }}</td>
                                                                    <td>{{ $number['formatted'] }}</td>
                                                                    <td>{{$number['provider']}}</td>
                                                                    <td>{{$number['assistant']['name']}}</td>
                                                                    <td>
                                                                        @if($number['status'] == 'active') 
                                                                        <span class="activeclass"><span class="material-symbols-outlined">cloud</span></span>
                                                                        @else
                                                                        <span class="inactiveclass"><span class="material-symbols-outlined">cloud_off</span></span>
                                                                        @endif
                                                                    </td>
                                                                    <td @if($number['createdAtFormatted'] != 'N/A') data-utc-time="{{ $number['createdAtFormatted'] }}" @endif>{{ $number['createdAtFormatted'] }}</td>
                                                                    <td @if($number['updatedAtFormatted'] != 'N/A') data-utc-time="{{ $number['updatedAtFormatted'] }}" @endif>{{ $number['updatedAtFormatted'] }}</td>
                                                                    <td>
                                                                    <div class="actiondiv">
                                                                        @if($number['customer_count'] == 0)
                                                                        <button type="button" class="clickable-row linkcustomer" data-id="{{$number['id']}}" data-number="{{$number['formatted']}}" data-placement="left" data-toggle="tooltip" title="Link Customer"><i class="fe fe-link"></i></button>
                                                                        @else
                                                                        N/A
                                                                        @endif
                                                                    </div>
                                                                    </td>
                                                                    <td>
                                                                        <div class="actiondiv">
                                                                            <button type="button" class="clickable-row-assistant linkassistant" data-id="{{$number['id']}}" data-number="{{$number['formatted']}}" data-assistant="{{ $number['assistant']['id'] ?? '' }}" data-placement="left" data-toggle="tooltip" title="Assign Assistant"><i class="fe fe-user-check"></i></button>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    <div class="mobile-card-view">
                                                        <div class="mobile-controls">
                                                            <div class="entries-control">
                                                                <label> 
                                                                    <select id="mobile-entries">
                                                                        <option value="10">10</option>
                                                                        <option value="25">25</option>
                                                                        <option value="50">50</option>
                                                                        <option value="100">100</option>
                                                                    </select>
                                                                </label>
                                                            </div>
                                                            <div class="search-control">
                                                                <input type="text" id="mobile-search" placeholder="Search">
                                                            </div>
                                                        </div>
                                                        
                                                        <div id="mobile-cards-container">
                                                            @foreach ($numbers as $number)
                                                            <div class="phone-card" data-search="{{ strtolower(($number['name'] ?? 'unlabeled') . ' ' . $number['formatted'] . ' ' . $number['provider'] . ' ' . $number['assistant']['name']) }}">
                                                                <div class="card-header-row">
                                                                    <div class="card-title">{{ isset($number['name']) && !empty($number['name']) ? $number['name'] : 'Unlabeled' }}</div>
                                                                    <div class="actiondiv">
                                                                        @if($number['customer_count'] == 0)
                                                                        <button type="button" class="clickable-row linkcustomer mr-2" data-id="{{$number['id']}}" data-number="{{$number['formatted']}}" title="Link Customer">
                                                                            <i class="fe fe-link"></i>
                                                                        </button>
                                                                        @endif
                                                                        <button type="button" class="clickable-row-assistant linkassistant" data-id="{{$number['id']}}" data-number="{{$number['formatted']}}" data-assistant="{{ $number['assistant']['id'] ?? '' }}" title="Assign Assistant">
                                                                            <i class="fe fe-user-check"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                                <div class="card-field col-md-12 px-0">
                                                                    <div class="row">
                                                                        <div class="field-label col-md-3 col-sm-3 col-xs-3">Number</div>
                                                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                                                        <div class="field-value col-md-8 col-sm-8 col-xs-8">{{ $number['formatted'] }}</div>
                                                                    </div>
                                                                </div>
                                                                <div class="card-field col-md-12 px-0">
                                                                    <div class="row">
                                                                        <div class="field-label col-md-3 col-sm-3 col-xs-3">Provider</div>
                                                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                                                        <div class="field-value col-md-8 col-sm-8 col-xs-8">{{ $number['provider'] }}</div>
                                                                    </div>
                                                                </div>
                                                                <div class="card-field col-md-12 px-0">
                                                                    <div class="row">
                                                                        <div class="field-label col-md-3 col-sm-3 col-xs-3">Assistant</div>
                                                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                                                        <div class="field-value col-md-8 col-sm-8 col-xs-8">{{ $number['assistant']['name'] }}</div>
                                                                    </div>
                                                                </div>
                                                                <div class="card-field col-md-12 px-0">
                                                                    <div class="row">
                                                                        <div class="field-label col-md-3 col-sm-3 col-xs-3">Status</div>
                                                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                                                        <div class="field-value col-md-8 col-sm-8 col-xs-8">
                                                                             @if($number['status'] == 'active') 
                                                                                <span class="activeclass"><span class="material-symbols-outlined">cloud</span></span>
                                                                            @else
                                                                                <span class="inactiveclass"><span class="material-symbols-outlined">cloud_off</span></span>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="card-field col-md-12 px-0">
                                                                    <div class="row">
                                                                        <div class="field-label col-md-3 col-sm-3 col-xs-3">Created</div>
                                                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                                                        <div class="field-value col-md-8 col-sm-8 col-xs-8" @if($number['createdAtFormatted'] != 'N/A') data-utc-time="{{ $number['createdAtFormatted'] }}" @endif>{{ $number['createdAtFormatted'] }}</div>
                                                                    </div>
                                                                </div>
                                                                <div class="card-field col-md-12 px-0">
                                                                    <div class="row">
                                                                        <div class="field-label col-md-3 col-sm-3 col-xs-3">Updated</div>
                                                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                                                        <div class="field-value col-md-8 col-sm-8 col-xs-8" @if($number['updatedAtFormatted'] != 'N/A') data-utc-time="{{ $number['updatedAtFormatted'] }}" @endif>{{ $number['updatedAtFormatted'] }}</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            @endforeach
                                                        </div>
                                                        
                                                        <div class="mobile-info">
                                                            <span id="entries-info">Showing 1 to 10 of {{ count($numbers) }} entries</span>
                                                        </div>
                                                        
                                                        <div class="mobile-pagination" id="mobile-pagination"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Main View End -->
                            </div>
                        </div>
                        <!-- <div class="card carddivision">
                            <div class="card-header">
                                <div class="card-title">Phone Numbers</div>
                            </div>
                            <div class="card-body cardbody">
                                <div id="table-wrapper" class="table-responsive">
                                    <table class="table table-bordered text-nowrap tablelistingsec" id="example1">
                                        <thead>
                                            <tr>
                                                <th class="wd-15p border-bottom-0">S.No</th>
                                                <th class="wd-15p border-bottom-0">Name</th>
                                                <th class="wd-15p border-bottom-0">Number</th>
                                                <th class="wd-15p border-bottom-0">Provider</th>
                                                <th class="wd-15p border-bottom-0">Assistant</th>
                                                <th class="wd-20p border-bottom-0">Status</th>
                                                <th class="wd-15p border-bottom-0">Created At</th>
                                                <th class="wd-10p border-bottom-0">Updated At</th>
                                                <th class="wd-10p border-bottom-0 text-center">Link Customer</th>
                                                <th class="wd-10p border-bottom-0 text-center">Assign Assistant</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($numbers as $number)
                                            <tr>
                                                <td>{{$number['sno']}}</td>
                                                <td>{{ isset($number['name']) && !empty($number['name']) ? $number['name'] : 'Unlabeled' }}</td>
                                                <td>{{ $number['formatted'] }}</td>
                                                <td>{{$number['provider']}}</td>
                                                <td>{{$number['assistant']['name']}}</td>
                                                <td>
                                                    @if($number['status'] == 'active') 
                                                    <span class="activeclass"><span class="material-symbols-outlined">cloud</span></span>
                                                    @else
                                                    <span class="inactiveclass"><span class="material-symbols-outlined">cloud_off</span></span>
                                                    @endif
                                                </td>
                                                <td @if($number['createdAtFormatted'] != 'N/A') data-utc-time="{{ $number['createdAtFormatted'] }}" @endif>{{ $number['createdAtFormatted'] }}</td>
                                                <td @if($number['updatedAtFormatted'] != 'N/A') data-utc-time="{{ $number['updatedAtFormatted'] }}" @endif>{{ $number['updatedAtFormatted'] }}</td>
                                                <td>
                                                <div class="actiondiv">
                                                    @if($number['customer_count'] == 0)
                                                    <button type="button" class="clickable-row linkcustomer" data-id="{{$number['id']}}" data-number="{{$number['formatted']}}"><i class="fe fe-link"></i></button>
                                                    @else
                                                    N/A
                                                    @endif
                                                </div>
                                                </td>
                                                <td>
                                                    <div class="actiondiv">
                                                        <button type="button" class="clickable-row-assistant linkassistant" data-id="{{$number['id']}}" data-number="{{$number['formatted']}}" data-assistant="{{ $number['assistant']['id'] ?? '' }}"><i class="fe fe-user-check"></i></button>
                                                    </div>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
            <!-- End app-content-->
        </div>
        <!--Footer-->
        @include('layouts.appfooter')
        <!-- End Footer-->
    </div>
    <!-- End Page -->

    <!-- Link Customer -->
    <div class="modal fade linkcustomerpopup" id="assignCustomerModal" tabindex="-1" aria-labelledby="assignCustomerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Link Customer</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" onclick="emptyfields()"><i class="fe fe-x"></i></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ route('admin.link_customer') }}">
                        @csrf
                        <input type="hidden" id="phone_number_id" name="phone_number_id" value="">
                        <div class="row">
                            <div class="linkformdiv col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="form-label">Phone Number</label>
                                    <input type="text" id="phone_number" name="phone_number" value="" class="form-control" readonly required>
                                </div>
                            </div>
                            <div class="linkformdiv col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="form-label">Type <span class="text-red">*</span></label>
                                    <select name="type" id="type" class="form-control select2 select2-show-search" required>
                                    <option value="">Select Type</option>
                                    <option value="inbound">Inbound</option>
                                    <option value="outbound">Outbound</option>
                                    </select>
                                </div>
                            </div>
                            <div class="linkformdiv col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="form-label">Customer <span class="text-red">*</span></label>
                                    <select name="customer" id="customer" class="form-control select2 select2-show-search" required>
                                    <option value="">Select Customer</option>
                                        @foreach($customers as $customer)
                                            <option value="{{ $customer->id }}">
                                                {{ $customer->first_name }} {{ $customer->last_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="linkformbtn col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <button type="submit" name="submit" class="link-btn">Link</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade linkassistantpopup" id="assignAssistantModal" tabindex="-1" aria-labelledby="assignAssistantModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Assign Assistant</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" onclick="emptyassistantfields()"><i class="fe fe-x"></i></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ route('admin.assign_assistant') }}">
                        @csrf
                        <input type="hidden" id="ast_phone_number_id" name="ast_phone_number_id" value="">
                        <div class="row">
                            <div class="linkformdiv col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="form-label">Phone Number</label>
                                    <input type="text" id="ast_phone_number" name="ast_phone_number" value="" class="form-control" readonly required>
                                </div>
                            </div>
                            <div class="linkformdiv col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="form-label">Assistant <span class="text-red">*</span></label>
                                    <select name="assistant" id="assistant" class="form-control select2 select2-show-search" required>
                                    <option value="">Select Assistant</option>
                                        @foreach($assistants as $assistant)
                                            <option value="{{ $assistant['id'] }}">
                                                {{ $assistant['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="linkformbtn col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <button type="submit" name="submit" class="link-btn">Assign</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Back to top -->
    <a href="#top" id="back-to-top"><i class="fe fe-chevrons-up"></i></a>
</div>
@include('includes.jslinks_common')
<!-- <script>
    function toggleTableResponsive() {
        const wrapper = document.getElementById('example1');
        if (window.innerWidth <= 1200) {
            wrapper.classList.add('table-responsive');
        } else {
            wrapper.classList.remove('table-responsive');
        }
    }
    // Run once on load
    toggleTableResponsive();
    // Run on window resize
    window.addEventListener('resize', toggleTableResponsive);

    $(document).ready(function () {
        setTimeout(function () {
            $('#example1_length').closest('.col-sm-12.col-md-6').addClass('lengthfilter');
            $('#example1_filter').closest('.col-sm-12.col-md-6').addClass('searchfilter');
        }, 100);
    });
</script> -->
<script>
    function formatToLocalTime(utcTimeString) {
        const date = new Date(utcTimeString);
        return date.toLocaleString(undefined, {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            //timeZoneName: 'short',
            hour12: false
        });
    }

    document.querySelectorAll('[data-utc-time]').forEach(el => {
        const utc = el.getAttribute('data-utc-time');
        // if (utc) {
        //     el.textContent = formatToLocalTime(utc);
        // }
        if (utc) {
            const formated = formatToLocalTime(utc);
            el.innerHTML = '<i class="fe fe-calendar calicon"></i>&nbsp;&nbsp;' + formated;
        }
    });

    $(document).on('click', '.clickable-row', function () {
        const numberId = $(this).data('id');
        const phoneNumber = $(this).data('number');
        $('#phone_number_id').val(numberId);
        $('#phone_number').val(phoneNumber);
        $('#assignCustomerModal').modal('show');
    });
    function emptyfields() {
        $('#phone_number_id').val('');
        $('#phone_number').val('');
        $('#customer').val('').trigger('change'); // resets Select2 dropdown
    }
    $(document).on('click', '.clickable-row-assistant', function () {
        const numberId = $(this).data('id');
        const phoneNumber = $(this).data('number');
        const assistant = $(this).data('assistant');
        $('#ast_phone_number_id').val(numberId);
        $('#ast_phone_number').val(phoneNumber);
        $('#assignAssistantModal').modal('show');
        if(assistant != '')
        {
            $('#assistant').val(assistant).trigger('change');
        }
    });
    function emptyassistantfields() {
        $('#ast_phone_number_id').val('');
        $('#ast_phone_number').val('');
        $('#assistant').val('').trigger('change'); // resets Select2 dropdown
    }

    // Select 2 script
    $(document).ready(function () {
        function toggleFocusClass($select) {
            const selectedVal = $select.val();
            const $selection = $select.next('.select2-container').find('.select2-selection');
            
            if (selectedVal) {
                $selection.addClass('selectfocus');
            } else {
                $selection.removeClass('selectfocus');
            }
        }
        $(document).on('change','.select2',function(){
            toggleFocusClass($(this));
        });
        toggleFocusClass($('.select2'));

        // $('.select2').select2({
        //     placeholder: "Please Select",
        //     minimumResultsForSearch: '',
        //     width: '100%',
        //     allowClear: true
        // });
    });
</script>
<script>
    $(document).ready(function() {
        let observer;
        
        $(document).on('select2:open', function() {
            // Remove initial highlight
            setTimeout(() => {
                $('.select2-results__option').removeClass('select2-results__option--highlighted');
            }, 10);
            
            // Start observing for class changes
            const resultsContainer = document.querySelector('.select2-results');
            if (resultsContainer && !observer) {
                observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                            const target = mutation.target;
                            if (target.classList.contains('select2-results__option--highlighted') && 
                                !target.matches(':hover')) {
                                target.classList.remove('select2-results__option--highlighted');
                            }
                        }
                    });
                });
                
                observer.observe(resultsContainer, {
                    attributes: true,
                    attributeFilter: ['class'],
                    subtree: true
                });
            }
        });
        
        $(document).on('select2:close', function() {
            if (observer) {
                observer.disconnect();
                observer = null;
            }
        });
        
        $(document).on('mouseenter', '.select2-results__option', function() {
            $('.select2-results__option').removeClass('select2-results__option--highlighted');
            $(this).addClass('select2-results__option--highlighted');
        });
        
        $(document).on('mouseleave', '.select2-results__option', function() {
            $(this).removeClass('select2-results__option--highlighted');
        });
    });
</script>
<!-- Mobile Card Script -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const cards = document.querySelectorAll('.phone-card');
        const entriesSelect = document.getElementById('mobile-entries');
        const searchInput = document.getElementById('mobile-search');
        const paginationContainer = document.getElementById('mobile-pagination');
        
        let currentPage = 1;
        let entriesPerPage = 10;
        let filteredCards = Array.from(cards);
        
        function updatePagination() {
            const totalPages = Math.ceil(filteredCards.length / entriesPerPage);
            const start = (currentPage - 1) * entriesPerPage + 1;
            const end = Math.min(currentPage * entriesPerPage, filteredCards.length);
            
            document.getElementById('entries-info').textContent = 
                `Showing ${start} to ${end} of ${filteredCards.length} entries`;
            
            paginationContainer.innerHTML = '';
            
            if (totalPages <= 1) return;
            
            const nav = document.createElement('nav');
            const ul = document.createElement('ul');
            ul.className = 'pagination';
            
            // First button
            const firstLi = document.createElement('li');
            firstLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
            const firstLink = document.createElement(currentPage === 1 ? 'span' : 'a');
            firstLink.className = 'page-link';
            firstLink.innerHTML = '&laquo;';
            if (currentPage > 1) {
                firstLink.onclick = () => { currentPage = 1; showPage(); };
            }
            firstLi.appendChild(firstLink);
            ul.appendChild(firstLi);
            
            // Previous button
            const prevLi = document.createElement('li');
            prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
            const prevLink = document.createElement(currentPage === 1 ? 'span' : 'a');
            prevLink.className = 'page-link';
            prevLink.innerHTML = '&lsaquo;';
            if (currentPage > 1) {
                prevLink.onclick = () => { currentPage--; showPage(); };
            }
            prevLi.appendChild(prevLink);
            ul.appendChild(prevLi);
            
            // Page numbers
            for (let i = 1; i <= totalPages; i++) {
                const pageLi = document.createElement('li');
                pageLi.className = `page-item ${i === currentPage ? 'active' : ''}`;
                const pageLink = document.createElement(i === currentPage ? 'span' : 'a');
                pageLink.className = 'page-link';
                pageLink.textContent = i;
                if (i !== currentPage) {
                    pageLink.onclick = () => { currentPage = i; showPage(); };
                }
                pageLi.appendChild(pageLink);
                ul.appendChild(pageLi);
            }
            
            // Next button
            const nextLi = document.createElement('li');
            nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
            const nextLink = document.createElement(currentPage === totalPages ? 'span' : 'a');
            nextLink.className = 'page-link';
            nextLink.innerHTML = '&rsaquo;';
            if (currentPage < totalPages) {
                nextLink.onclick = () => { currentPage++; showPage(); };
            }
            nextLi.appendChild(nextLink);
            ul.appendChild(nextLi);
            
            // Last button
            const lastLi = document.createElement('li');
            lastLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
            const lastLink = document.createElement(currentPage === totalPages ? 'span' : 'a');
            lastLink.className = 'page-link';
            lastLink.innerHTML = '&raquo;';
            if (currentPage < totalPages) {
                lastLink.onclick = () => { currentPage = totalPages; showPage(); };
            }
            lastLi.appendChild(lastLink);
            ul.appendChild(lastLi);
            
            nav.appendChild(ul);
            paginationContainer.appendChild(nav);
        }



        function showPage() {
            const start = (currentPage - 1) * entriesPerPage;
            const end = start + entriesPerPage;
            
            cards.forEach(card => card.style.display = 'none');
            filteredCards.slice(start, end).forEach(card => card.style.display = 'block');
            
            updatePagination();
        }
        
        function filterCards() {
            const searchTerm = searchInput.value.toLowerCase();
            filteredCards = Array.from(cards).filter(card => 
                card.dataset.search.includes(searchTerm)
            );
            currentPage = 1;
            showPage();
        }
        
        entriesSelect.addEventListener('change', function() {
            entriesPerPage = parseInt(this.value);
            currentPage = 1;
            showPage();
        });
        
        searchInput.addEventListener('input', filterCards);
        
        // Initialize
        showPage();
    });
</script>
@endsection