{{-- Setup Work --}}
<div class="setup-wrapper-contents">
    <div class="flex flex-wrap items-start justify-between gap-2 mb-6">
        <h2 class="text-[20px] leading-6 font-bold text-[#1f2937]">{{ get_static_option('work_title') ?? __('Skills &amp; Expertise') }}</h2>
        <button type="button" id="skip_work"
            class="text-[15px] font-medium text-[#334155] hover:text-primary transition">{{ __('Skip') }}</button>
    </div>

    <input type="hidden" id="set_category_id" value="{{ $user_work->category_id ?? '' }}">
    <input type="hidden" id="set_sub_category_id" value="{{ $user_work->sub_category_id ?? '' }}">

    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6">
        @foreach($categories as $cat)
        <div class="work_category_id cursor-pointer">
            <input type="hidden" value="{{ $cat->id }}">
            <div class="work-category-card @if(!empty($user_work) && $cat->id == $user_work->category_id) active @endif">
                <div class="w-10 h-10 mx-auto mb-2 flex items-center justify-center">
                    {!! render_image_markup_by_attachment_id($cat->image) !!}
                </div>
                <h4 class="text-[13px] font-semibold text-[#1f2937]">{{ $cat->category }}</h4>
            </div>
        </div>
        @endforeach
        <div class="cursor-pointer">
            <div class="work-category-card work-click">
                <div class="w-10 h-10 mx-auto mb-2 flex items-center justify-center">
                    <span class="text-[18px] font-bold text-primary">+{{ $more_categories->count() ?? '' }}</span>
                </div>
                <h4 class="text-[13px] font-semibold text-[#1f2937]">{{ __('Categories to choose from') }}</h4>
            </div>
        </div>
    </div>

    <div>
        <h3 class="text-[15px] font-semibold text-[#1f2937] mb-3">{{ get_static_option('work_inner_title') ?? __('Choose, what would you do?') }}</h3>
        <ul class="get_subcategory overflow-auto set_scroll_height space-y-0.5">
            @if(!empty($user_work->category_id))
                @php $sub_categories = \Modules\Service\Entities\SubCategory::where('category_id', $user_work->category_id)->get(); @endphp
                @foreach($sub_categories as $sub_cat)
                    <li class="subcategory-item choose_a_subcategory @if(!empty($user_work) && $user_work->sub_category_id === $sub_cat->id && $user_work->user_id === $user_id) active @endif"
                        data-id="{{ $sub_cat->id }}">{{ $sub_cat->sub_category }}</li>
                @endforeach
            @else
                <span class="choose_a_subcategory text-[13px] text-[#94a3b8] px-4">{{ __('Select a category first') }}</span>
            @endif
        </ul>
    </div>
</div>

{{-- Work categories modal --}}
<div id="work-modal" class="hidden fixed inset-0 z-50 items-center justify-center bg-black/50">
    <div class="bg-white rounded-[14px] shadow-xl w-full max-w-[600px] mx-4 px-6 py-7 max-h-[90vh] overflow-y-auto">
        <div class="flex items-start justify-between mb-5">
            <div>
                <h2 class="text-[18px] font-bold text-[#1f2937]">{{ get_static_option('work_modal_title') ?? __('Choose a service') }}</h2>
                <p class="mt-1 text-[13px] text-[#64748b]">{{ __('Choose what kinds of services will you provide to clients?') }}</p>
            </div>
            <button type="button" class="close-work-modal w-8 h-8 rounded-full bg-[#f1f5f9] flex items-center justify-center text-[#334155] hover:bg-[#e2e8f0] transition shrink-0 ml-3">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div class="mb-4">
            <div class="relative">
                <input type="text" id="category_search_string" placeholder="{{ __('Search service') }}" class="form-input" style="padding-left: 40px;" />
                <svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-[#94a3b8] pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </div>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 search_result mt-2">
            @include('frontend.user.freelancer.account.work.search-categories')
        </div>
        <div class="mt-5 pt-4 border-t border-[#e9edf2] flex justify-end">
            <button type="button" class="close-work-modal h-[42px] px-6 rounded-[7px] border border-[#d6dde6] text-[#334155] text-[14px] font-semibold hover:bg-[#f1f5f9] transition">{{ __('Cancel') }}</button>
        </div>
    </div>
</div>