{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
    {{ $page_title ?? '' }}
@endsection

{{-- Content --}}
@section('content')
@include('backend.hr.support_center.header')
<!--begin::Card-->
    <div class="card">
        <!--begin::Card body-->
        <div class="card-body">

            <!--begin::Layout-->
            <div class="d-flex flex-column flex-xl-row p-7">

                <!--begin::Content-->
                <div class="flex-lg-row-fluid me-xl-15 mb-20 mb-xl-0">

                    <!--begin::Tickets-->
                    <div class="mb-0">

                        <!--begin::Search form-->
                        {{-- <form method="post" action="#" class="form mb-15">
                            <div class="position-relative">
                                <span class="svg-icon svg-icon-1 svg-icon-primary position-absolute top-50 translate-middle ms-9">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
                                        <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="black" />
                                    </svg>
                                </span>
                                <input type="text" class="form-control form-control-lg form-control-solid ps-14" name="search" placeholder="Search" />
                            </div>
                        </form> --}}
                        <!--end::Search form-->

                        <h1 class="text-dark mb-10">{{ $category_name ?? "" }}</h1>

                        <!--begin::Tickets List-->
                        <div id="help-pages-container" class="mb-10">
                            @foreach($pages as $page)
                                @php
                                    $pageIcon = 'icons/duotune/' . ($page['page_icon'] ?? 'abstract/abs027.svg');
                                    $pageColor = $page['page_color'] ?? 'primary';
                                @endphp

                                <div class="d-flex mb-10">
                                    {!! theme()->getSvgIcon($pageIcon, 'svg-icon-' . $pageColor . ' svg-icon-2x svg-icon-lg-2x me-5 ms-n1 mt-2') !!}
                                    <div class="d-flex flex-column">
                                        <div class="d-flex align-items-center mb-2">
                                            <a href="{{ route('support_center.index', ['category' => $category, 'help_page' => $page['id']]) }}" class="text-dark text-hover-primary fs-4 me-3 fw-bold">
                                                {{ $page['page_name'] ?? "" }}
                                            </a>
                                        </div>
                                        <span class="text-muted fw-bold fs-6">{{ $page['short_description'] ?? '' }}</span>
                                    </div>
                                </div>
                            @endforeach

                            <!--begin::Pagination-->
                            @if ($pages->hasPages())
                                <ul class="pagination">
                                    <li class="page-item previous {{ $pages->onFirstPage() ? 'disabled' : '' }}">
                                        <a href="{{ $pages->previousPageUrl() }}" class="page-link">
                                            <i class="previous"></i>
                                        </a>
                                    </li>

                                    @foreach ($pages->getUrlRange(1, $pages->lastPage()) as $page => $url)
                                        <li class="page-item {{ $page == $pages->currentPage() ? 'active' : '' }}">
                                            <a href="{{ $url }}" class="page-link">{{ $page }}</a>
                                        </li>
                                    @endforeach

                                    <li class="page-item next {{ !$pages->hasMorePages() ? 'disabled' : '' }}">
                                        <a href="{{ $pages->nextPageUrl() }}" class="page-link">
                                            <i class="next"></i>
                                        </a>
                                    </li>
                                </ul>
                            @endif
                            <!--end::Pagination-->

                        </div>
                        <!--end::Tickets List-->

                    </div>
                    <!--end::Tickets-->

                </div>
                <!--end::Content-->


                <!--begin::Sidebar-->
                <div class="flex-column flex-lg-row-auto w-100 mw-lg-300px mw-xxl-350px">

                    <!--begin::Categories-->
                    <div class="card-rounded bg-primary bg-opacity-5 p-10 mb-15">
                        <h1 class="fw-bolder text-dark mb-9">Browse</h1>

                        @forelse ($categories as $catId => $catTitle)
                            @php
                                $isActive = (string)$catId === (string)$category;
                                $catUrl   = route('support_center.index', ['category' => $catId]);
                            @endphp

                            <div class="d-flex align-items-center mb-5">
                                <span class="svg-icon svg-icon-2 ms-n1 me-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <path d="M12.6343 12.5657L8.45001 16.75C8.0358 17.1642 8.0358 17.8358 8.45001 18.25C8.86423 18.6642 9.5358 18.6642 9.95001 18.25L15.4929 12.7071C15.8834 12.3166 15.8834 11.6834 15.4929 11.2929L9.95001 5.75C9.5358 5.33579 8.86423 5.33579 8.45001 5.75C8.0358 6.16421 8.0358 6.83579 8.45001 7.25L12.6343 11.4343C12.9467 11.7467 12.9467 12.2533 12.6343 12.5657Z" fill="{{ $isActive ? '#009ef7' : 'black' }}" />
                                    </svg>
                                </span>

                                <a href="{{ $catUrl }}" class="fw-bold fs-5 m-0 {{ $isActive ? 'text-primary' : 'text-gray-800 text-hover-primary' }}">
                                    {{ $catTitle }}
                                </a>
                            </div>
                        @empty
                            <div class="alert alert-warning p-4">No categories available.</div>
                        @endforelse
                    </div>
                    <!--end::Categories-->

                </div>
                <!--end::Sidebar-->


            </div>
            <!--end::Layout-->

        </div>
        <!--end::Card body-->

    </div>
    <!--end::Card-->
@endsection
@section('scripts')
<script>
blockUI = new KTBlockUI(document.querySelector('#kt_body'));
</script>
@endsection