<div class="app-header">
    <a class="logo" href="{{ route('admin.dashboard') }}">
        <img src="{{ siteFavicon() }}" alt="logo">
    </a>
    <div class="app-header-content">
        <div class="app-header-left">
            <p class="app-header-title">{{ __(gs('site_name')) }}</p>
            <div class="d-md-block">
                <a href="{{ route('admin.ticket.add') }}" class="btn btn--sm btn--base">
                    <span class="icon">
                        <i class="fas fa-plus"></i>
                    </span>
                    <span class="d-none d-sm-block">
                        @lang('Add Ticket')
                    </span>
                </a>
            </div>
        </div>

        <div class="app-header-right">
            <div class="app-header-right-nav">
                @if (version_compare(gs('available_version'), systemDetails()['version'], '>'))
                    <a href="{{ route('admin.system.update') }}" class="app-header-btn text--base">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-big-down-dash-icon lucide-arrow-big-down-dash">
                            <path d="M15 11a1 1 0 0 0 1 1h2.939a1 1 0 0 1 .75 1.811l-6.835 6.836a1.207 1.207 0 0 1-1.707 0L4.31 13.81a1 1 0 0 1 .75-1.811H8a1 1 0 0 0 1-1V9a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1z" />
                            <path d="M9 4h6" />
                        </svg>
                    </a>
                @endif

                <a href="{{ route('home') }}" target="_blank" class="app-header-btn">
                    @include('admin.partials.svg.web')
                </a>

                <button class="app-header-btn searchBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <g clip-path="url(#clip0_1458_26465)">
                            <path opacity="0.2" d="M10.5 18C14.6421 18 18 14.6421 18 10.5C18 6.35786 14.6421 3 10.5 3C6.35786 3 3 6.35786 3 10.5C3 14.6421 6.35786 18 10.5 18Z" fill="currentColor"></path>
                            <path d="M10.5 18C14.6421 18 18 14.6421 18 10.5C18 6.35786 14.6421 3 10.5 3C6.35786 3 3 6.35786 3 10.5C3 14.6421 6.35786 18 10.5 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M15.8027 15.8037L20.9993 21.0003" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_1458_26465">
                                <rect width="24" height="24" fill="white"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                    <span class="app-header-btn-tooltip">
                        @lang('Ctrl + K')
                    </span>
                </button>

                @php
                    $unreadNotification = App\Models\AdminNotification::where('is_read', Status::NO)->count();
                @endphp

                <a href="javascript:void(0)" class="app-header-btn notify_header_btn">
                    @include('admin.partials.svg.notification')
                    @if ($unreadNotification)
                        <span class="animated-circle danger">
                        </span>
                    @endif
                </a>
                <a href="{{ route('admin.profile') }}" class="app-header-btn">
                    @include('admin.partials.svg.setting')
                </a>
                <div class="profile-btn">
                    <img src="{{ getImage(getFilePath('adminProfile') . '/' . auth('admin')->user()->image, avatar: true) }}" alt="profile-image">
                </div>
            </div>
        </div>
    </div>
</div>

<div id="searchModal" class="modal custom--modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="global-search">
                <span class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <g clip-path="url(#clip0_1458_26465)">
                            <path opacity="0.2" d="M10.5 18C14.6421 18 18 14.6421 18 10.5C18 6.35786 14.6421 3 10.5 3C6.35786 3 3 6.35786 3 10.5C3 14.6421 6.35786 18 10.5 18Z" fill="currentColor"></path>
                            <path d="M10.5 18C14.6421 18 18 14.6421 18 10.5C18 6.35786 14.6421 3 10.5 3C6.35786 3 3 6.35786 3 10.5C3 14.6421 6.35786 18 10.5 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M15.8027 15.8037L20.9993 21.0003" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_1458_26465">
                                <rect width="24" height="24" fill="white"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </span>
                <input type="text" class="global-search-input searchInput" placeholder="@lang('Find what you need')">
            </div>
            <div class="modal-body">
                <div class="global-search-result searchResult">
                    <div class="empty-message search-message">
                        <div class="empty-message-icon">
                            <img src="{{ asset('assets/images/empty_list.png') }}" alt="">
                        </div>
                        <p class="empty-message-text">
                            @lang('Search result will be shown here.')
                        </p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="user-guide">
                    <div class="user-guide-item">
                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-down-left-icon lucide-corner-down-left">
                                <path d="M20 4v7a4 4 0 0 1-4 4H4" />
                                <path d="m9 10-5 5 5 5" />
                            </svg>
                        </span>
                        <span class="text">@lang('To select')</span>
                    </div>
                    <div class="user-guide-item">
                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-icon lucide-arrow-down">
                                <path d="M12 5v14" />
                                <path d="m19 12-7 7-7-7" />
                            </svg>
                        </span>
                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-icon lucide-arrow-down">
                                <path d="M12 5v14" />
                                <path d="m19 12-7 7-7-7" />
                            </svg>
                        </span>
                        <span class="text">@lang('To navigate')</span>
                    </div>
                    <div class="user-guide-item">
                        <span class="icon">
                            <svg width="15" height="15" aria-label="Escape key" role="img">
                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
                                    <path
                                        d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956">
                                    </path>
                                </g>
                            </svg>
                        </span>
                        <span class="text">@lang('To close')</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@php
    $sidebarRendered = view('admin.partials.sidebar')->render();
    $settingSidebarRendered = view('admin.setting.sidebar')->render();
@endphp

<div id="hiddenSidebar" style="display:none;">
    @php
        echo $sidebarRendered;
        echo $settingSidebarRendered;
    @endphp
</div>

@push('script')
    <script>
        (function($) {
            "use strict";
            let modal = $('#searchModal');

            $('.searchBtn').on('click', function() {
                modal.modal('show');
            });

            $(document).on('keydown', function(e) {
                if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
                    e.preventDefault();
                    modal.modal('show');
                }
            });

            modal.on('shown.bs.modal', function() {
                $('.searchInput').trigger('focus');
            });

            let selectedIndex = -1;

            function buildResults(keyword) {
                let results = $('.searchResult').empty();

                if (!keyword) {
                    let emptyKeyword = `<div class="empty-message search-message">
                                            <div class="empty-message-icon">
                                                <img src="{{ asset('assets/images/empty_list.png') }}" alt="">
                                            </div>
                                            <p class="empty-message-text">
                                                @lang('Search result will be shown here.')
                                            </p>
                                        </div>`;

                    $('.searchResult').html(emptyKeyword);
                    return;
                }

                let found = false;

                $('#hiddenSidebar .setting-sidebar-item a, #hiddenSidebar .app-sidebar-item a').each(function() {
                    let text;

                    if ($(this).closest('.app-sidebar-item').length) {
                        text = ($(this).attr('data-bs-title') || '').toLowerCase();
                    } else {
                        text = $(this).text().toLowerCase();
                    }

                    if (text.includes(keyword)) {
                        found = true;

                        let link = $(this).attr('href');
                        let label = text.trim();

                        let item = `
                            <a href="${link}" class="global-search-item" tabindex="-1">
                                <div class="flex-align flex-nowrap">
                                    <span class="has-icon">#</span>
                                    <p class="text">${toTitleCase(label)}</p>
                                </div>
                                <span class="arrow-icon">
                                    <i class="fa-solid fa-chevron-right"></i>
                                </span>
                            </a>
                        `;
                        results.append(item);
                    }
                });

                if (!found) {
                    let nowResultFound = `<div class="empty-message search-message">
                                            <div class="empty-message-icon">
                                                <img src="{{ asset('assets/images/no-data.gif') }}" alt="">
                                            </div>
                                            <p class="empty-message-text">
                                                @lang('No search result found.')
                                            </p>
                                        </div>`;

                    $('.searchResult').html(nowResultFound);

                }

                selectedIndex = -1; 
            }

            $('.searchInput').on('input', function() {
                let keyword = $(this).val().toLowerCase().trim();
                buildResults(keyword);
            });

            $('.searchInput').on('keydown', function(e) {
                let $items = $('.searchResult .global-search-item');
                if ($items.length === 0) return;

                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    selectedIndex = (selectedIndex + 1) % $items.length;
                    updateActiveItem($items, selectedIndex);
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    selectedIndex = (selectedIndex - 1 + $items.length) % $items.length;
                    updateActiveItem($items, selectedIndex);
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    if (selectedIndex >= 0) {
                        window.location.href = $items.eq(selectedIndex).attr('href');
                    }
                }
            });

            function updateActiveItem($items, index) {
                $items.removeClass('active');
                let $item = $items.eq(index);
                $item.addClass('active');

                let container = $('.searchResult')[0];
                if (!container) return;

                let containerHeight = $(container).height();

                let scrollTop = container.scrollTop;

                let itemTop = $item.position().top; // position relative to container
                let itemHeight = $item.outerHeight();

                // If item is below visible area, scroll down
                if (itemTop + itemHeight > containerHeight) {
                    container.scrollTop = scrollTop + (itemTop + itemHeight - containerHeight);
                }
                // If item is above visible area, scroll up
                else if (itemTop < 0) {
                    container.scrollTop = scrollTop + itemTop - 25;
                }
            }

            function toTitleCase(str) {
                return str
                    .toLowerCase()
                    .replace(/\b\w/g, function(letter) {
                        return letter.toUpperCase();
                    });
            }


        })(jQuery);
    </script>
@endpush


@push('style')
    <style>
        .searchResult {
            max-height: 326px;
            overflow-y: auto;
        }

        .search-message {
            height: 326px;
        }
    </style>
@endpush
