@extends("website.layouts.layout")
@section('title',"My Account")
@section("body")
<!--Banner-->

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

<!--- services section -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('homepage')}}">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">

        <!-- <img src="./assets/images/hamburger-menu.svg" alt="hamburger-icon" width="30" class="hamburger-icon"> -->

        <div class="row sidebar_row">

            @include("website.clients.includes.sidebar")

            <div class="main-content">
                <div class="main-content-wrapper lg-width my-current-project">
                    <h3 class="heading-text">My Projects</h3>
                    <ul class="nav-buttons d-flex">
                        <div class="ul-action-btn d-flex flex-wrap">
                            <li><a type="button" class="btn btn-primary current" href="{{route('client.myAccount')}}">Current </a></li>
                            <li><a type="button" class="btn btn-secondary past" href="{{route('client.pastProjects')}}">Completed</a></li>
                            <li><a type="button" class="btn btn-secondary past" href="{{route('client.cancelJobWeb')}}">Cancelled</a></li>
                        </div>

                    </ul>



                    <div class="project-block scrollable-project-block">

                        @if(isset($currentJobs['success']['data']) && empty(!$currentJobs['success']['data']))
                        @foreach($currentJobs['success']['data'] as $jobs)
                        <div class="project-block-item">

                            <a class="project-linking project-link" href="{{route('client.projectDetails',$jobs['task_id'])}}">
                            <div class="project-header-item d-flex align-items-center ">

                                @php
                                    $serviceProvider = $jobs['service_provider'];

                                    // Split the name into parts (e.g., first, middle, last)
                                    $nameParts = explode(' ', trim($serviceProvider));

                                    // Get the first name
                                    $firstName = $nameParts[0] ?? '';

                                    // Initialize last name initial as empty
                                    $lastNameInitial = '';

                                    // Check if a second part exists and is not empty
                                    if (isset($nameParts[1]) && strlen(trim($nameParts[1])) > 0) {
                                        $lastNameInitial = strtoupper(trim($nameParts[1])[0]);
                                    }

                                    // Combine first name and the last name initial
                                    $displayName = $firstName . ' ' . $lastNameInitial;
                                @endphp

                                <h3 class="heading">{{ $displayName }}</h3>
                                <p class="para sr-no">#{{ $jobs['project_id'] }}</p>
                                </div>



                                <div class="project-user-profile-item ser-profile d-flex">
                                    <img src="{{$jobs['profile_sp']}}" alt="">
                                    <div class="project-user-inner-item d-flex flex-column">
                                        <h3 class="heading-text" style="color: #0d6efd;">{{$jobs['category_name']}}</h3>
                                        <h3 class="heading-text">{{$jobs['category']}}</h3>


                                        <div
                                            class="user-scheduled-time d-flex gap-3 align-items-center">

                                            <span class="d-flex gap-2 align-items-center"><img
                                                    src="{{asset('webAssets/assets/images/calender.svg')}}" class="ml-2" alt="calender">
                                                <p>{{date('D-M-d-Y', strtotime($jobs['schedule_date']))}}</p>

                                            </span>
                                            
                                            <span class="d-flex "><img src="{{asset('webAssets/assets/images/clock-noun.svg')}}"
                                                    alt="clock">
                                                <p class="para para_time" data-utc-time="{{ $jobs['schedule_time'] }} "></p>
                                            </span>

                                        </div>


                                        <div
                                            class="user-scheduled-time d-flex justify-content-between align-items-center">

                                            <span class="d-flex gap-2 align-items-center"><img
                                                    src="{{asset('webAssets/assets/images/location-icon.svg')}}" class="ml-2" alt="location">
                                                <p>{{$jobs['apt_unit']}} {{$jobs['city']}} {{$jobs['state']}} {{$jobs['country']}} {{$jobs['project_address']}}</p>

                                            </span>


                                        </div>
                                    </div>

                                </div>
                                <p class="para">{{$jobs['description']}}</p>
                            </a>
                        </div>
                        @endforeach
                        @else
                        <div class="project-block-item">
                            <p>No Current jobs available.</p>
                        </div>
                        @endif

                    </div>


                </div>

            </div>

        </div>
    </div>

</section>
@endsection



@section('footerItems')
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        // Loop through each '.para' element
        $('.para_time').each(function() {
            // Get the UTC time stored in the data attribute
            var utcTime = $(this).data('utc-time');
    
            // Convert the UTC time to local time using moment.js
            var localTime =  utcTime// moment.utc(utcTime, "hh:mm:ss A").local().format('LT'); // 'LT' for localized time format
            
            // Update the text of the paragraph to the local time
            $(this).text(localTime);
        });
    });
</script>