@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"><a href="{{ route('profile.achievement') }}">My Business</a></li>
                <li class="breadcrumb-item active" aria-current="page">Skill Master Status</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">Skill Master Status</h3>
                    <ul class="nav-buttons d-flex">
                        <div class="ul-action-btn analysis d-flex mb-3">
                            <li><a type="button" class="btn btn-primary current" href="#"
                                    data-target="income">Progress</a></li>
                            <li><a type="button" class="btn btn-secondary past" href="#"
                                    data-target="opportunity">About</a></li>

                        </div>
                    </ul>
                    <div id="income" class="content-div project-block">
                        <div class="project-block-item ">
                            <div class="project-linking d-flex flex-column gap-24px">


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

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

                                            <img src="{{ asset('webAssets/assets/images/danger-alert-icon.svg') }}"
                                                alt="alert-icon">
                                        </div>
                                        <div class="view-summary-text-col ">
                                            <p class="para">You are currently Viewing the data from February 2024.
                                                No futher changes can be made</p>
                                        </div>
                                    </div>

                                </div>
                                <div
                                    class="project-body-items  text-start view-summary-inner d-flex flex-column gap-12px">
                                    <h6 class="head">Monthly Projects Progress</h6>
                                    <p class="head">This resets each month.</p>
                                    <div class="view-summary d-flex success-alert new-success-alert justify-content-between">
                                        <div class="view-summary-text-col">
                                            <h6 class="head">
                                                {{ isset($data['skill_master']['projects_done_in_month']) ? $data['skill_master']['projects_done_in_month'] : 'N/A' }}
                                                Monthly Projects</h6>
                                        </div>
                                        <div class="view-summary-img-col">

                                            <img src="{{ asset('webAssets/assets/images/sm-tick.svg') }}" alt="tick">
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="project-body-items  text-start view-summary-inner d-flex flex-column gap-12px">
                                    <h6 class="head">Lifetime Projects Progress</h6>
                                    <p class="head">Reach 200 once- it never resets</p>
                                    <div class="view-summary d-flex success-alert new-success-alert justify-content-between">
                                        <div class="view-summary-text-col">
                                            <h6 class="head">
                                                {{ isset($data['skill_master']['total_projects_done']) ? $data['skill_master']['total_projects_done'] : 'N/A' }}
                                                Lifetime Projects</h6>
                                        </div>
                                        <div class="view-summary-img-col">
                                            <img src="{{ asset('webAssets/assets/images/sm-tick.svg') }}" alt="tick">
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="project-body-items text-start view-summary-inner d-flex flex-column gap-12px">
                                    <h6 class="head">Category Projects Progress</h6>
                                    <p class="head">Reach 50 once per category - it never resets</p>

                                    @if(isset($data['skill_master']['projects_done_on_category']) &&
                                    count($data['skill_master']['projects_done_on_category']) > 0)
                                    @foreach($data['skill_master']['projects_done_on_category'] as $project)
                                    <div class="view-summary d-flex success-alert new-success-alert justify-content-between">
                                        <div class="view-summary-text-col">
                                            <h6 class="head">
                                                {{ isset($project['total']) ? $project['total'] : 'N/A' }}
                                                {{ isset($project['category']) ? $project['category'] : 'N/A' }}
                                            </h6>
                                        </div>
                                        <div class="view-summary-img-col">
                                            <img src="{{ asset('webAssets/assets/images/sm-tick.svg') }}" alt="tick">
                                        </div>
                                    </div>

                                    <div class="skill-master-progress d-flex flex-column gap-8px">
                                        <div class="progress-items d-flex flex-column gap-8px">
                                            <div class="progress-inner-items d-flex justify-content-between">
                                                <p class="para grey-color font-size-14 ">
                                                    {{ $project['total'] }} / 50 {{ $project['category'] }}
                                                </p>
                                            </div>
                                            <div class="progress w-50" role="progressbar" aria-label="Basic example"
                                                aria-valuenow="{{ $project['total'] }}" aria-valuemin="0"
                                                aria-valuemax="50">
                                                <div class="progress-bar"
                                                    style="width: {{ ($project['total'] / 50) * 100 }}%"></div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    @else
                                    <p class="head">No projects available in this category.</p>
                                    @endif
                                </div>



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



                    <div id="opportunity" class="content-div project-block">
                        <div class="project-block-item achievement">
                            <div class="project-linking">
                                <div class="project-body-items text-start d-flex flex-column gap-8px">
                                    <div class="analysis ">
                                        <h3 class="head font-size-20">Overview</h3>
                                        <!-- <span class="filter d-flex gap-4px align-items-center">
                                            <svg width="17" height="20" viewBox="0 0 17 20" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M3.16683 6.33333L3.16683 1.75M3.16683 18.25L3.16683 10M14.1668 18.25L14.1668 10M8.66683 18.25V13.6667M8.66683 10V1.75M14.1668 6.33333L14.1668 1.75M1.3335 6.33333H5.00016M6.8335 13.6667H10.5002M12.3335 6.33333L16.0002 6.33333"
                                                    stroke="#2446C0" stroke-width="1.8" stroke-linecap="round" />
                                            </svg>

                                        </span> -->
                                        <span class="filter d-flex gap-4px align-items-center">
                                            <p>
                                                {!! isset($data['about']['about']) ? $data['about']['about'] : 'N/A' !!}

                                            </p>
                                        </span>
                                    </div>

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



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

<script>
const buttons = document.querySelectorAll('.ul-action-btn a');
const contentDivs = document.querySelectorAll('.content-div');

// buttons.forEach(button => {
//     button.addEventListener('click', function(e) {
//         e.preventDefault();  Prevent default anchor click behavior
//         const targetId = button.getAttribute('data-target');

//         Hide all content divs
//         contentDivs.forEach(div => {
//             div.style.display = 'none';
//         });

//         Show the targeted content div
//         document.getElementById(targetId).style.display = 'block';

//         Update button styles
//         buttons.forEach(btn => {
//             btn.classList.remove('active', 'btn-primary');  Remove active and primary classes
//             btn.classList.add('btn-secondary');  Set to secondary for inactive buttons
//         });
//         button.classList.add('active', 'btn-primary');  Set clicked button to active and primary
//     });
// });


// Updated script for toggling of progress and about button

buttons.forEach(button => {
    button.addEventListener('click', function (e) {
        e.preventDefault(); // Prevent default anchor click behavior

        // Remove active state from all buttons and set them to past (secondary)
        buttons.forEach(btn => {
            btn.classList.remove('btn-primary', 'current', 'active');
            btn.classList.add('btn-secondary', 'past');
        });

        // Set clicked button to active state (primary)
        button.classList.remove('btn-secondary', 'past');
        button.classList.add('btn-primary', 'current', 'active');
    });
});


// Show the first content div by default and mark the first button as active
document.getElementById('income').style.display = 'block';
buttons[0].classList.add('active', 'btn-primary'); // Set the first button as active
</script>

@endsection