@extends("website.service-providers.layouts.layout")
@section('title', "Services")
@section("body")
<link rel="stylesheet" href="{{ asset('css/sp.css') }}">
<style>
    .content-div {
        display: none;
        /* Hide all content divs by default */
    }
</style>
<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">Bussiness Settings</h3>
                    <ul class="nav-buttons d-flex">

                    </ul>

                    <div class="project-block mt-3">
                        <div class="project-block-item">
                            <div class="project-linking d-flex flex-column gap-24px">
                                <div class="d-flex push-notification-inner-items justify-content-between">
                                    <p class="notification-paragraph">Receive work requests today</p>
                                    <div class="authentication-switch">
                                        <label class="switch">
                                            <input type="checkbox" {{ isset($data['available']['available_status']) && $data['available']['available_status'] ? 'checked' : '' }}>
                                            <span class="slider round"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="project-block mt-3">
                        <div class="project-block-item">
                            <a href="{{ route('sp.availability') }}"
                                class="view-summary d-flex gap-8px text-decoration-none">

                                <div class="project-linking d-flex flex-column gap-24px flex-grow-1">
                                    <div class="project-body-items view-summary-inner d-flex  gap-12px">

                                        <div class="view-summary-img-col">
                                            <img src="{{ asset('webAssets/assets/images/calender.svg') }}"
                                                alt="alert-icon">
                                        </div>
                                        <div class="view-summary-text-col">
                                            <p class="para">Availability</p>
                                            <p class="para">
                                                @if(isset($data['AvailTimes']) && !empty($data['AvailTimes']))
                                                                                                {{ implode(', ', array_map(function ($time) {
                                                        return date('H:i', strtotime($time));
                                                    }, $data['AvailTimes'])) }}
                                                @else
                                                    No available times
                                                @endif
                                            </p>
                                        </div>


                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="project-block mt-3 ">
                        <div class="project-block-item">
                            <a href="{{ route('achievement.skill') }}"
                                class="view-summary d-flex gap-8px text-decoration-none">

                                <div class="project-linking d-flex flex-column gap-24px flex-grow-1">
                                    <div class="project-body-items view-summary-inner d-flex flex-column gap-12px">

                                        <div class="view-summary d-flex gap-8px">
                                            <div class="view-summary-img-col">
                                                <img src="{{ asset('webAssets/assets/images/calender.svg') }}"
                                                    alt="alert-icon">
                                            </div>
                                            <div class="view-summary-text-col">
                                                <p class="para">Skills</p>
                                                <p class="para">
                                                    @if(
                                                            isset($data['getProviderSkills']) &&
                                                            is_array($data['getProviderSkills']) &&
                                                            count($data['getProviderSkills']) > 0
                                                        )
                                                                                                            {{-- Extract category names and make them unique --}}
                                                                                                            @php
                                                                                                                // Collect category names into an array
                                                                                                                $categoryNames =
                                                                                                                    collect($data['getProviderSkills']['data'])->pluck('category_name')->unique();
                                                                                                            @endphp

                                                                                                            @if($categoryNames->isNotEmpty())
                                                                                                                {{ $categoryNames->implode(', ') }}
                                                                                                            @else
                                                                                                                No skills available
                                                                                                            @endif
                                                    @else
                                                        No skills available
                                                    @endif
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="project-block mt-3">
                    <div class="project-block-item ">
                        <a href="{{ route('sp.availability') }}"
                            class="view-summary d-flex gap-8px text-decoration-none">
                            <div class="project-linking d-flex flex-column gap-24px flex-grow-1">
                                <div class="project-body-items view-summary-inner d-flex flex-column gap-12px">


                                    <div class="view-summary d-flex gap-8px">
                                        <div class="view-summary-img-col">

                                            <img src="{{ asset('webAssets/assets/images/uit_calender.png') }}"
                                                alt="alert-icon">
                                        </div>
                                        <div class="view-summary-text-col ">
                                            <p class="para">Work Area</p>
                                            <p class="para">Work Area Set</p>
                                        </div>
                                    </div>


                                </div>

                            </div>
                        </a>
                    </div>
                </div>
                </div>


                
            </div>
        </div>

    </div>
    </div>
    </div>
    </div>
</section>



@endsection