@extends("website.layouts.layout")
@section('title',"Past Projects")
@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">Completed 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-secondary past" 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-primary current" href="{{route('client.pastProjects')}}">Cancelled</a></li>
                        </div>
                    </ul>


                    <div class="project-block scrollable-project-block">
                        @if(isset($cancelJob['success']['job_status_3']) && !empty($cancelJob['success']['job_status_3']))
                            @foreach($cancelJob['success']['job_status_3'] as $job2)
                                <div class="project-block-item">
                                    <a class="project-linking" href="{{route('client.cancelledProjectDetails', $job2['task_id'])}}">
                                        <div class="project-header-item d-flex align-items-center">
                                            @php
                                                $serviceProvider = trim($job2['service_provider']);
                                                $nameParts = explode(' ', $serviceProvider);
                                                $firstName = $nameParts[0];
                                                $lastNameInitial = isset($nameParts[1]) ? strtoupper($nameParts[1][0]) : '';
                                                $displayName = $firstName . ' ' . $lastNameInitial;
                                            @endphp
                                            <h3 class="heading">{{ $displayName }}</h3>
                                            
                                            
                                        </div>
                                        <div class="project-user-profile-item ser-profile d-flex">
                                            <img src="{{$job2['profile_sp']}}" alt="">
                                            <div class="project-user-inner-item d-flex flex-column">
                                                <h3 class="heading-text blue-color ">{{$job2['category_name']}}</h3>
                                                <h3 class="heading-text">{{$job2['sub_category_name']}}</h3>
                                                
                                                <div class="user-scheduled-time d-flex gap-3 align-items-center">
                                                    <span class="d-flex">
                                                        <img src="{{asset('webAssets/assets/images/clock-noun.svg')}}" alt="clock">
                                                
                                                        <p class="para para_time" data-utc-time="{{ $job2['schedule_time'] }}"></p>
                                                    </span>
                                                    <span class="d-flex align-items-center">
                                                        <img src="{{asset('webAssets/assets/images/uit_calender.png')}}" class="ml-2" alt="calender">
                                                       
                                                        <p>{{date('D-M-d-Y', strtotime($job2['schedule_date']))}}</p>
                                                    </span>
                                                </div>
                                                <p class="para-text" style="color: red;">Job Cancelled</p>
                                            </div>
                                            <p class="para sr-no">#{{$job2['project_id']}}</p>
                                            
                                        </div>
                                        <p class="para">{{$job2['description']}}</p>
                                    </a>
                                </div>
                            @endforeach
                        @else
                            <div class="project-block-item">
                                <p>No Past cancelJob 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 = moment.utc(utcTime, "HH:mm:ss").local().format('LT'); // 'LT' for localized time format
        
        // Update the text of the paragraph to the local time
        $(this).text(localTime);
    });
});

</script>