@extends('layouts.main')
@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{asset('css/requests.css')}}"/>
    @endpush
@endonce
@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">

    <x-page-header>
        VIEWING CONTACTS
    </x-page-header>
    @cannot('help-desk-access')
    <div class="top-bar">
        <div class="contacts-json mb-5" id="contacts-json">
            <x-ui.blue-button modal="reformat-old-json-modal">
                REFORMAT OLD JSON
            </x-ui.blue-button>
            <a href="{{route('management-contacts.json.generate')}}">
                <x-ui.blue-button>
                    GENERATE JSON FROM DB
                </x-ui.blue-button>
            </a>
            <a href="{{route('management-contacts.json-download') }}">
                <x-ui.blue-button>
                    DOWNLOAD JSON
                </x-ui.blue-button>
            </a>
            <x-ui.blue-button modal="replace-json-modal">
                REPLACE JSON
            </x-ui.blue-button>
            @include('management-contacts.partials.reformat-old-json-modal')
            @include('management-contacts.partials.replace-json-modal')

        </div>
    </div>
    @endcannot
    <div class="d-flex justify-content-between mb-5 top-actions-container">
        <div class="d-flex custom width-fix">
            <form id="contacts-form" style="display: contents">
                <x-ui.search-field id="search-field">

                </x-ui.search-field>

            </form>
        </div>

    </div>


    @if(!empty($json))
    <div id="listDataContainer">
        <div>
            <x-ui.list-wrapper :empty="count($json)">
                <x-slot name="tHead">
                    <th class="text-center">ID</th>
                    <th>FIRST NAME</th>
                    <th>LAST NAME</th>
                    <th>EMAIL</th>
                    @cannot('help-desk-access')
                    <th class="text-center">ACTION</th>
                    @endcannot
                </x-slot>
                <x-slot name="tBody" id="contacts-table-body">

                    @foreach($json as $entry)
                        <tr  class="contact-entry">
                            <td class="text-center">
                                <b>{{$entry->id}}</b>
                            </td>

                            <td class="firstname">
                                <b>{{$entry->firstname_el}}</b>
                            </td>

                            <td class="lastname">
                                <b>{{$entry->lastname_el}}</b>
                            </td>

                            <td>
                                <b>{{$entry->email}}</b>
                            </td>
                            @cannot('help-desk-access')
                            <td class="text-center action-column">
                                <span for="action-{{$loop->index}}" class="actions-toggle">
                                    <img src="{{asset('images/actions-toggle.svg')}}" alt="open actions">
                                </span>

                                <div class="actions-popup">
                                    <span class="close-popup">X</span>
                                    <ul>
                                        <li>
                                            <a href="{{route('management-contacts.json.edit-entry', ['entry' => base64_encode(json_encode($entry))])}}">
                                                EDIT
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{route('management-contacts.json.delete-entry', ['entry' => base64_encode(json_encode($entry))])}}">
                                                DELETE
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                            </td>
                            @endcannot
                        </tr>
                    @endforeach

                </x-slot>
            </x-ui.list-wrapper>
        </div>
    </div>
    @endif
    </div>
@endsection

@push('scripts-stack')
    <script defer>
        function debounce(func, timeout = 300){
            let timer;
            return (...args) => {
                clearTimeout(timer);
                timer = setTimeout(() => { func.apply(this, args); }, timeout);
            };
        }

        function handleSearch(e) {
            const searchQuery = e.target.value.toLowerCase();
            const rows = document.querySelectorAll('.contact-entry');

            rows.forEach(row => {
                const firstname = row.querySelector('.firstname b').textContent.toLowerCase();
                const lastname = row.querySelector('.lastname b').textContent.toLowerCase();

                if (firstname.includes(searchQuery) || lastname.includes(searchQuery)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }

        const debSearch = debounce(handleSearch, 300);

        const search = document.getElementById('search-field');
        search.addEventListener('input', debSearch);
    </script>
@endpush