@extends("website.service-providers.layouts.layout")
@section('title', "Services")
@section("body")
<link rel="stylesheet" href="{{ asset('css/sp.css') }}">

<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>

<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Current Project</li>
            </ol>
        </nav>
    </div>
</section>

<section class="dashboard-main">
    <div class="container">
        <div class="row">
            @include("website.service-providers.includes.sidebar")
            @include("website.layouts.modal")

            <div class="main-content">
                <div class="main-content-wrapper lg-width analysis">
                    <h3 class="heading-text">Choose Skills</h3>

                    <div class="project-block">
                        <div class="project-block-item achievement">
                            <div class="project-linking">
                                <div class="project-body-items skills text-start d-flex flex-column gap-16px">
                                    <div class="my-skill-item d-flex flex-column gap-12px">
                                        <div class="choose-skills-block d-flex flex-column gap-12px">
                                            <div class="skill-dropdown d-flex">
                                                <div class="accordion w-100 d-flex flex-column gap-12px"
                                                    id="accordionSkill">
                                                    @foreach ($categories as $group)
                                                    <div class="accordion-item">
                                                        <h2 class="accordion-header skill-header">
                                                            <button class="accordion-button collapsed d-flex gap-12px"
                                                                type="button" data-bs-toggle="collapse"
                                                                data-bs-target="#collapseGroup{{ $group->id }}"
                                                                aria-expanded="true"
                                                                aria-controls="collapseGroup{{ $group->id }}">
                                                                <span><img src="{{ asset($group->logo) }}"
                                                                        alt=""></span>
                                                                {{ $group->Group_name }}
                                                            </button>
                                                        </h2>

                                                        <div id="collapseGroup{{ $group->id }}"
                                                            class="accordion-collapse collapse"
                                                            data-bs-parent="#accordionSkill">
                                                            <div class="accordion-body skill">
                                                                <ul
                                                                    class="dropdown-accordion d-flex flex-wrap gap-12px">
                                                                    @foreach ($group->sub_categories as $category)
                                                                    <li>
                                                                        <a class="dropdown-item"
                                                                            href="{{ route('achievement.addskill', ['gp_id' => $group->id, 'id' => $category->id]) }}">
                                                                            {{ $category->Category }}
                                                                        </a>
                                                                    </li>

                                                                    @endforeach
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection